當使用物件數組時，在v-for迴圈中是否可以同時將目前物件賦值給一個變數並解構其屬性？像這樣：
v-for
<div v-for="(person = {name, age}, index) in persons">
最終我希望能夠在模板中同時使用整個person物件和它的屬性。
person
據我所知，你不能同時做這兩件事。
但是，你可以解構，例如：
<div v-for="({name, age}, index) in persons">
然後你可以透過索引存取正確的元素：persons[index]。
persons[index]
範例：
new Vue({ el: "#app", data: { todos: [{ text: "Learn JavaScript", done: false }, { text: "Learn Vue", done: false }, { text: "Play around in JSFiddle", done: true }, { text: "Build something awesome", done: true } ] }, methods: { toggle: function(index) { this.todos[index].done = !this.todos[index].done } } })
body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } li { margin: 8px 0; } h2 { font-weight: bold; margin-bottom: 15px; } del { color: rgba(0, 0, 0, 0.3); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Todos:</h2> <ol> <li v-for="({text, done}, i) in todos"> <label> <input type="checkbox" v-on:change="toggle(i)" v-bind:checked="done"> <del v-if="done"> {{ text }} </del> <span v-else> {{ text }} </span> {{todos[i]}} </label> </li> </ol> </div>
據我所知，你不能同時做這兩件事。
但是，你可以解構，例如：
<div v-for="({name, age}, index) in persons">然後你可以透過索引存取正確的元素：
persons[index]。範例：
new Vue({ el: "#app", data: { todos: [{ text: "Learn JavaScript", done: false }, { text: "Learn Vue", done: false }, { text: "Play around in JSFiddle", done: true }, { text: "Build something awesome", done: true } ] }, methods: { toggle: function(index) { this.todos[index].done = !this.todos[index].done } } })body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } li { margin: 8px 0; } h2 { font-weight: bold; margin-bottom: 15px; } del { color: rgba(0, 0, 0, 0.3); }<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Todos:</h2> <ol> <li v-for="({text, done}, i) in todos"> <label> <input type="checkbox" v-on:change="toggle(i)" v-bind:checked="done"> <del v-if="done"> {{ text }} </del> <span v-else> {{ text }} </span> {{todos[i]}} </label> </li> </ol> </div>