localStorage is not reactive but I needed to “watch” it because my app uses localstorage and didn’t want to re-write everything so here’s what I did using CustomEvent. I would dispatch a CustomEvent whenever you add something to storage localStorage.setItem(‘foo-key’, ‘data to store’) window.dispatchEvent(new CustomEvent(‘foo-key-localstorage-changed’, { detail: { storage: localStorage.getItem(‘foo-key’) } })); Then where ever … Read more
Summing up: <!– Component A –> <template> <div class=”A”> <B> <component :is=”child_component”></component> </B> </div> </template> <script> import B from ‘./B.vue’; import Equipment from ‘./Equipment.vue’; export default { name: ‘A’, components: { B, Equipment }, data() { return { child_component: ‘equipment’ }; } }; </script> <!– Component B –> <template> <div class=”B”> <h1>Some content</h1> <slot></slot> <!– … Read more
Try to add another data object property called currentIndex and update it to the clicked button index : // DATA data() { return { currentIndex:-1, isActive: false, … inside the template bind the class as follows :class=”{buttonActive : (index==currentIndex) }”: <div class=”buttonBrand”> <button v-for=”(element, index) in brand” :key=”index” :class=”{buttonActive : (index==currentIndex) }” @click=”changeBrand(index)”> <img v-bind:src=”https://stackoverflow.com/questions/57742076/element.imageBrand” … Read more
Vue 3 Same as the Vue 2.6 example below except: $listeners has been merged into $attrs so v-on=”$listeners” is no longer necessary. See the migration guide. $scopedSlots is now just $slots. See migration guide. Vue 2.6 (v-slot syntax) All ordinary slots will be added to scoped slots, so you only need to do this: <wrapper> … Read more
In my child component, there are no buttons to emit changed data. It’s a form with somewhat 5~10 inputs. the data will be submitted once you click the process button in another component. so, I can’t emit every property when it’s changing. So, what I did, In my parent component, I can access child’s data … Read more
Make a global data object const shared = { api: “http://localhost/myApi”, mySharedMethod(){ //do shared stuff } } If you need to expose it on your Vue, you can. new Vue({ data:{ shared } }) If you don’t, you can still access it inside your Vues or components if you’ve imported it or they are defined … Read more
You can do this: class YourComponent extends Vue { $refs!: { checkboxElement: HTMLFormElement } someMethod () { this.$refs.checkboxElement.checked } } From this issue: https://github.com/vuejs/vue-class-component/issues/94
In my case, I was getting the error because I upgraded from Laravel Mix Version 2 to 5. In Laravel Mix Version 2, you import vue components as follows: Vue.component( ‘example-component’, require(‘./components/ExampleComponent.vue’) ); In Laravel Mix Version 5, you have to import your components as follows: import ExampleComponent from ‘./components/ExampleComponent.vue’; Vue.component(‘example-component’, ExampleComponent); Here is the … Read more
To pass props dynamically, you can add the v-bind directive to your dynamic component and pass an object containing your prop names and values: So your dynamic component would look like this: <component :is=”currentComponent” v-bind=”currentProperties”></component> And in your Vue instance, currentProperties can change based on the current component: data: function () { return { currentComponent: … Read more
You can watch props to execute some code upon props changes: new Vue({ el: ‘#app’, data: { text: ‘Hello’ }, components: { ‘child’ : { template: `<p>{{ myprop }}</p>`, props: [‘myprop’], watch: { myprop: function(newVal, oldVal) { // watch it console.log(‘Prop changed: ‘, newVal, ‘ | was: ‘, oldVal) } } } } }); <script … Read more