Your code should work if you setup everything correctly: http://codepen.io/CodinCat/pen/RKZeZe?editors=1010 A very common mistake is that you didn’t give your state initial data. You should declare the state shape explicitly, so instead of state: {} // or state: { nav: {} } do this: state: { nav: { type: ‘…’ }, … } or the … Read more
Under the new Composition API, all of the variables that you previously defined in data() are just returned from your setup() function as normal variables with reactive values. For example, a Vue 2.0 component that had a data function like so: data() { return { foo: 1, bar: { name: “hi” } } } becomes … Read more
Vue 3 ref A ref is a mechanism for reactivity in Vue 3. The idea is to wrap a non-object variable inside a reactive object: Takes an inner value and returns a reactive and mutable ref object. The ref object has a single property .value that points to the inner value. Hmm.. Why? Vue 3 … Read more
No. <template> <div></div> <div>~someone~</div> </template> Yes. <template> <div> <div></div> ~someone~ </div> </template> If you do not use a “div” tag just inside the “Template” tag, you will get the same error. (By the way, it was possible to use other than div tags)
This is easy to accomplish. You can register components globally in the main.js file. import MyComponent from ‘@/components/MyComponent’ Vue.component(‘my-component-name’, MyComponent) Now you can use <my-component-name /> everywhere. A cleaner way, without bloating your main.js, is to import your component in an index.js file in your components folder like this. import Vue from ‘vue’ import MyComponent … Read more
Unfortunately, it is impossible to use computed property in data because of component creation timing: data evaluates Before computed properties.
Thanks to Sandeep Rajoria we found solution, need to use this.$route except $route inside a component
I have a file with function like a func.js like below export const func = { functionName: (data) => { return something } } In main.js add 2 string import {func} from ‘./func.js’ Vue.prototype.$func = func and you can use from all components if in script tag like below this.$func.functionName(somedata) or if template tag like … Read more
Just use v-if on a common parent to all the elements in your template relying on that AJAX call, not around each one. So instead of something like: <div> <h1 v-if=”foo.title”>{{ foo.title }}</h1> <p v-if=”foo.description”>{{ foo.description }}</p> </div> Do <div> <template v-if=”foo”> <h1>{{ foo.title }}</h1> <p>{{ foo.description }}</p> </template> </div>
The trick is to alter the key When the key changes, vue regards it as a new component, so it will unmount the “old” component, and mount a “new” component. See example, the created() hook will only run once, so if you see the value change, you’re seeing a brand new object. example: Vue.component(‘my-component’, { … Read more