vue-component

I'm using vue-router with a series of components like tabs. Each <router-link> is a tab and the space below is the <router-view> . Two of the tabs are the same component with different filters, let's say they are products and the router adds a parameter for filtering: /products/new & /products/sale . Inside of products are individual product components which get mounted when the route is opened. My problem is that when I switch between the routes, and the filter parameter is changed, the product components get remounted every time. I'd like to cache them so switching back and forth is easier.

I use vue.js 2 and laravel 5.6 My vue component like this : <template> <a v-if="auth" href="javascript:" class="btn btn-default btn-block" @click="add($event)"> Add </a> <a v-else href="javascript:" class="btn btn-default btn-block" @click="logout"> Add </a> </template> <script> export default { data() { return { auth: App.authCheck } }, methods: { add(event) { ... }, logout() { window.location = '/login?red='+window.location.pathname } } } </script> If the user is not logged in, it will call the logout method I try like the code above, but if user login, it does not redirect to the previous

I'm using vue-cli + bootstrap-vue. I can't figure out why and how bootstrap mixins not working at all despite I imported Bootstrap like this (in my main.js) import 'bootstrap/scss/bootstrap-grid.scss' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue); And trying to use some mixins inside component <style lang="scss" scoped> .xxx { @include media-breakpoint-up(md) { display: none; } } </style> But if I import missing files everything will be fine: <style lang="scss" scoped> @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss

What is the corect way to import vue packages in laravel 5.6? It comes with vue and bootstrap preinstall. I see they are all compile in app.js from public directory but I can figure out how to import https://github.com/moreta/vue-search-select and use it. After I tried to import it on my own: Error: ncaught TypeError: Vue.component is not a function At line: Vue.component('search-user', __webpack_require__(42)); Until now I tried this: assets/js/bootstrap.js: import { BasicSelect } from 'vue-search-select'; window.BasicSelect = BasicSelect; assets/js/app.js: require('./bootstrap'); window.Vue

I get reference from here : https://bootstrap-vue.js.org/docs/components/card/#card-groups https://bootstrap-vue.js.org/docs/components/button/#pressed-state-and-toggling My vue component like this : <template> ... <b-card-group deck v-for="row in formattedItems"> <b-card :title="item.title" img-src="http://placehold.it/140?text=No image" img-alt="Img" img-top v-for="item in row"> <p class="card-text"> {{item.price}} </p> <p class="card-text"> {{item.country}} </p> <div slot="footer"> <b-button-group size="sm"> <b-button :pressed.sync="oriPress" variant="outline-primary">Original</b-button> <b

Normally using Vue as an out of the box solution with Laravel so it just 'works'. I am adding it now to a WordPress build but have an issue with an inline template. Every looks fine, but it will not do anything in the mounted method and says that any data or methods are undefined, almost likes its not properly loading the component. Here is the basic HTML: <tabbed-panels class="component tabPanels" inline-template> <div> <div class="tabPanels__controls-control" v-on:click="changeTab(1)"></div> </div> </tabbed-panels> tabbed-panels.js: export default { data() { return { activeTab: null } },

My vue component like this : <template> <div ref="modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form> ... <div class="modal-footer"> ... <button type="button" class="btn btn-success" @click="addPhoto"> Save </button> </div> </form> </div> </div> </div> </template> <script> export default { ... methods: { addPhoto() { const data = { id_product: this.idProduct }; this.$store.dispatch('addImageProduct', data) .then((response) => { this.$parent.$options.methods.createImage(response) }); }, } } </script> If I click button

I have a child component and parent component. Parent component renders child component dynamically i.e. on demand and keeps the record in array. When a child component demands to be removed, it emits event and hence passes down its id to be identified in record. Though the record does get removed based on id but the last created instance is removed, always. Even if you click the first child, it is going to remove the last one only. Here is the link that is identical to my situation but only in simple form. I did research on SO and found this answer whose fiddle is here . So I did follow its