v-for

来源： https://stackoverflow.com/questions/43490522/vue-js-v-for-not-working

问题 There are examples in the Vue docs using the key keyword use both :key= and v-bind:key= when defining the key in a v-for loop. Is one just syntactic sugar of the other, or do they do different things? Examples from the docs using both types: :key <my-component v-for="item in items" :key="item.id"></my-component> v-bind:key <my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id" ></my-component> 回答1: :key= and v-bind:key= are exactly the same.

问题 There are examples in the Vue docs using the key keyword use both :key= and v-bind:key= when defining the key in a v-for loop. Is one just syntactic sugar of the other, or do they do different things? Examples from the docs using both types: :key <my-component v-for="item in items" :key="item.id"></my-component> v-bind:key <my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id" ></my-component> 回答1: :key= and v-bind:key= are exactly the same.

问题 If I have the following data property: person: {name: 'Joe', age: 35, department: 'IT'} And wanted to loop through and output it as follows: name: Joe, age: 35, department: IT So far I have: <span v-for="(val, key) in person">{{key}}: {{val}}, </span> But this displays: name: Joe, age: 35, department: IT, with an extra comma on the end, how can I have it detect that it's the last prop and not show the comma? I thoughta v-show or v-if may be the solution but can't quite figure out how to make

问题 I made a BlogList.vue component which list all the blog teasers. I made a search box in the BlogList.vue component: <input type="text" placeholder="Enter key word" v-model="search"> With a computed property I build the search filter based on what the user types in the search field: computed: { getfilteredData() { return this.experiences.filter(experience => experience.name.toLowerCase().includes( this.search.toLowerCase() ) ) } }, This all works fine. But I like to move the search box to a

问题 I made a BlogList.vue component which list all the blog teasers. I made a search box in the BlogList.vue component: <input type="text" placeholder="Enter key word" v-model="search"> With a computed property I build the search filter based on what the user types in the search field: computed: { getfilteredData() { return this.experiences.filter(experience => experience.name.toLowerCase().includes( this.search.toLowerCase() ) ) } }, This all works fine. But I like to move the search box to a

问题 I have a simple Vue filter that limits the length of an array to n elements. It works fine used like this: {{ array | limitArray(2) }} Now I'd like to use it inside a v-for loop, like this: <li v-for="item in items | limitArray(3)">...</li> But that throws errors. How can I use a filter inside a v-for ? Edit: Probably unimportant, but the filter in question: Vue.filter('limitArray', function (arr, length = 3) { if (arr && arr.length) { if (length == -1) { return arr; } if (length > arr.length

问题 I need to use index on a v-for but on the same level as the directive itself in order to mutate the state being shown. <template> <div> <div v-for="share in sharesPurchased()" :key="share"> <div> <h4>This is some content</h4> <p style="border: solid 1px">{{share.count}}</p> </div> </div> </div> </template> <script> export default { data(){ return { shares: [ {id: 'BMW', count: 1}, {id: 'Ford', count: 0}, {id:'Apple', count: 10} ] } }, methods: { sharesPurchased() { // I want to use this at

问题 There are several images. I want to make image 1 pop up when I click on image 1, and I want image 2 to pop up when I click on image 2. Can I solve it using the index in class? Carousel.vue <template> <div v-for="(item, index) in items" :key="index"> <img :src="item.thumbnail" /> <button type="button" @click="imgClick()" :class="`img-index--${index}`">button-{{ index }}</button> </div> <Modal v-if="showModal" @close="showModal = false"> <div slot="body" v-for="(item, index) in items" :key=

问题 How to show only one button per every distinct date ? can i use two v-for loops ? how to select distinct values in my loop? <div v-for="question in allQuestions" > <button v-for="date in question.date"> {{date}} </button> </div> Data model : allQuestions : [] question : {'id' : '123' , 'date' : '25'} 回答1: You can use Set: The Set object lets you store unique values of any type, whether primitive values or object references. MDN's example: const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6