Update 2022 For those who prefer Vite, there’s a tool called Laravel Vite which is a project based on PHP package, Vite plugin and preset, you could install it as follows : npx @preset/cli apply laravel:vite This removes the default config in the Laravel fresh project. For further details please check the different section in … Read more
If you’re going to v-model a computed, it needs a setter. Whatever you want it to do with the updated value (probably write it to the $store, considering that’s what your getter pulls it from) you do in the setter. If writing it back to the store happens via form submission, you don’t want to … 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
According to this awesome tip from Vuedose blog Vue.js 2.6 introduced some new features, and one I really like is the new global observable API. Now you can create reactive objects outside the Vue.js components scope. And, when you use them in the components, it will trigger render updates appropriately. In that way, you can … Read more
What you are doing will throw a warning in Vue (in the console). [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “propRoomSelected” The value will actually change inside the component, … Read more
As stated in this jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , you have no obligation to use webpack or .vue files. The code below is not from me and all credit goes to this jsFiddle creator: Create an index.html file: <script src=”https://npmcdn.com/vue/dist/vue.js”></script> <script src=”https://npmcdn.com/vue-router/dist/vue-router.js”></script> <script src=”/js/Home.js”></script> <script src=”/js/Foo.js”></script> <script src=”/js/router.js”></script> <script src=”/js/index.js”></script> <div id=”app”> <router-link to=”https://stackoverflow.com/”>/home</router-link> <router-link to=”/foo”>/foo</router-link> <router-view></router-view> … Read more
As mentioned in the Typescript Support section of the Vue documentation: Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of certain methods. For this reason, you may need to annotate the return type on methods like render and those in computed. In your case, you should change … Read more
I suppose getDetailMenu is calling API method to get listMenu. You can create route dynamically using addRoutes method Pseudo code created() { this.getDetailMenu(this.$route.path) .then((listMenu) => { // you need to return listMenu from getDetailMenu listMenu.forEach((item, index) => createAndAppendRoute(item, index)) }) }, methods: { createAndAppendRoute: (item, index) => { console.log(item, index) // Base on your data, … Read more
The most direct replacement is app.config.globalProperties. See: https://vuejs.org/api/application.html#app-config-globalproperties So: Vue.prototype.$myGlobalVariable = globalVariable becomes: const app = createApp(RootComponent) app.config.globalProperties.$myGlobalVariable = globalVariable This is scoped to a particular application rather than being global as it was with Vue.prototype. This is by design, all ‘global’ configuration options are now scoped to an application. The relevant RFC is here: … 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