This happens when you enter a route you are already on, and the component is not reloaded, even though the parameters are different. Change your router-view to: <router-view :key=”$route.fullPath” /> Vue tries to reuse components when possible, which is not what you want in this situation. The key attribute tells Vue to use a different … Read more
Vue sets all the properties in the data option to setters/getters to make them reactive. See Reactivity in depth Since you want myArray to be static you can create it as a custom option which can be accessed using vm.$options export default{ data() { return{ someReactiveData: [1, 2, 3] } }, //custom option name myArray … Read more
Use params. this.$router.push({ name: ‘foo’, params: {title: ‘test title’ }}) Note: You have to specify name. This does not work if you call this.$router.push using path. And set the route to accept params as props. {path: “/foo”, name:”foo”, component: FooComponent, props: true} props: true is documented here.
It’s all about Timing nextTick allows you to execute code after you have changed some data and Vue.js has updated the virtual DOM based on your data change, but before the browser has rendered that change on the page. Normally, devs use the native JavaScript function setTimeout to achieve similar behavior, but using setTimeout relinquishes … Read more
You can import the css file on App.vue, inside the style tag. <style> @import ‘./assets/styles/yourstyles.css’; </style> Also, make sure you have the right loaders installed, if you need any.
You’re loading your fonts from a CDN, which is not the recommended way of doing things. Here is a quote from this awesome performance checklist 2021 written by Vitaly Friedman Now, many of us might be using a CDN or a third-party host to load web fonts from. In general, it’s always better to self-host … Read more
You’re using splice in a wrong way. The overloads are: array.splice(start) array.splice(start, deleteCount) array.splice(start, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, …) Start means the index that you want to start, not the element you want to remove. And you should pass the second parameter deleteCount as 1, which means: “I want to delete 1 element starting at the … 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
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
Computed values and methods are very different in Vue and are definitely not interchangeable in most cases. Computed Property A more appropriate name for a computed value is a computed property. In fact, when the Vue is instantiated, computed properties are converted into a property of the Vue with a getter and sometimes a setter. … Read more