v-for: элемент массива и деструктуризация свойств
При работе с массивом объектов можно ли в цикле v-for присвоить текущий объект переменной и одновременно уничтожить его свойства? Что-то вроде этого:
<div v-for="(person = {name, age}, index) in persons">
В конечном счете я ищу способ использовать, например, как весь объект person, так и его свойства в шаблоне.
У вопроса есть решение - Посмотреть?
Ответы - v-for: элемент массива и деструктуризация свойств / v-for: Array element and destructuring of properties
Является ответом!
02.12.2020 06:28:12
Насколько я знаю, вы не можете делать и то, и другое.
Но вы можете разрушать, т. е.
<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>
Помочь в развитии проекта: