vuejs2

问题 The application i'm working on renders an array of persons and their children. There are about 600 persons in the array. I am displaying the person name and the names of each person's children in text inputs so that they can be edited. I use a V-model for two way binding so I can easily save the edits. <tr v-for="person in persons"> <td> <input type="text" v-model="person.name" /> </td> <td v-for="child in person.children"> <input type="text" v-model="child.name" /> </td> </tr> The problem is

问题 This is my first VueJS project (making the move from jQuery) and I am trying to filter a grid with multiple checkboxes. As you can see from the JavaScript, I have a filterJobs function that filters the array with values set from whats checked (the v-model="checkedLocations"). array.includes appears to filter on a single value and I'd like to filter multiple values. I don't want to pop or slice the array because if they uncheck a location the they'll be gone and won't rebind let careers =

问题 Imagine this simple case. You have a Vue JS application in which users can create lists of tasks and sort them. These lists should be stored in a database by the server. Let's assume we have a ListComponent which does the bulk of the UX. My question is, which pattern should I use to handle front-end and back-end data synchronisation? A) Go through vuex : Store the active lists (those being shown, edited or created) in the vuex store . The ListComponent will change the store and then , the

问题 Imagine this simple case. You have a Vue JS application in which users can create lists of tasks and sort them. These lists should be stored in a database by the server. Let's assume we have a ListComponent which does the bulk of the UX. My question is, which pattern should I use to handle front-end and back-end data synchronisation? A) Go through vuex : Store the active lists (those being shown, edited or created) in the vuex store . The ListComponent will change the store and then , the

问题 I am trying to watch and wait until Vue router guard will get final value from Vuex however it throws [vuex] store.watch only accepts a function Here is the code: const isAdmin = _.get(store, 'getters.user/isAdmin', undefined) if (to.matched.some(record => record.meta.isAdmin)) { if (isAdmin === undefined) { const watcher = store.watch(isAdmin, isAdmin => { watcher() // stop watching if (!isAdmin) next({ path: '/not-available' }) }) } else if (serv.isAuth() && !isAdmin) { next({ path: '/not

问题 I am trying to watch and wait until Vue router guard will get final value from Vuex however it throws [vuex] store.watch only accepts a function Here is the code: const isAdmin = _.get(store, 'getters.user/isAdmin', undefined) if (to.matched.some(record => record.meta.isAdmin)) { if (isAdmin === undefined) { const watcher = store.watch(isAdmin, isAdmin => { watcher() // stop watching if (!isAdmin) next({ path: '/not-available' }) }) } else if (serv.isAuth() && !isAdmin) { next({ path: '/not

问题 I have in my main component one custom component and I need to fire a custom event on click, I tried it in this way: <child-component @click="fireCustomEvent"></child-component> This does not work and I tried to solve this problem with adding @click.native <child-component @click.native="fireCustomEvent"></child-component> With .native it works but it fires the event every time if I click inside my "child-component". Can I avoid somehow to fire this event again if I click inside "child

问题 I am trying to mount a separate file loader with vue.js. Each loader can load only one file. According to the following code, the objective should be that in the structure ' adjuntos ' each loaded file get saved properly. But it doesn't work. I have mounted an example in JSFiddle . https://jsfiddle.net/JLLMNCHR/09qtwbL6/74/ Also here is the code: <div id="app"> <ul v-for="index in numAdjuntos" v-bind:id="index" v-bind:key="index"> <li> <label>File {{index}}</label> <input v-if="adjuntos[index

问题 Until now, I was trying to change the value of an object property to false using @click='review.isActive = true' , however, it turns out Vue cannot detect such changes which means that property won't be reactive. Based on the documentation https://vuejs.org/v2/guide/list.html#Caveats, this can be avoided by using one of the following methods: Vue.set(vm.reviews, index, true) vm.reviews.splice(index, 1, true) Sadly I get an error using either way. I assume I don't quite understand how the Vue

问题 I'm running on vue.js 2.6.1 the current code (written by a co-worker who's not around anymore) He used the 'scope' directive with the following deprecated syntax <template slot="HEAD[epc]" slot-scope="data"> <div> <p class="column-title">{{data.label}}</p> <p class="explanation-text">{{data.field.explanation}}</p> </div> </template> I want to access the slot-scope "data" prop but I want to migrate the old syntax onto a new one the documentation fails to explain how. also, I tried changing the