将for循环中每个项目的值设置为true或false

Question

我正在尝试创建一个v-for，它显示包含多个集合的练习列表。我创建了一个循环，每个练习下面的每组都有一行。

我的数据是这样的。

const exercises = [ 
{ id: 1, name: exercise1, sets: 3 },
{ id:2, name: exercise2, sets: 2 } 
{ id:3, name: exercise3, sets: 4 } 
]

我的组件看起来像这样：

<template v-for="exercise in exercises" :key="exercise.id">
<span> {{ exercise.name }} </span>
<template v-for="set in exercise.sets" :key="set">
<span @click="completeSet()"> {{ set }} </span>
</template>
</template>

现在，我希望能够通过单击事件将每个集合的值设置为true或false，从而将每个集合标记为已完成。但我不确定如何做到这一点，因为每个集合都没有一个属性来设置值，因为它是通过一个数字循环的。

解决这个问题的正确方法是什么？

Answer 1

首先，您不能循环通过一个数字。为了能够循环这些集合，你必须进行

<template v-for="let set = 0; set < exercise.sets; set++" :key="set">
<span @click="completeSet()"> {{ set }} </span>
</template>

但是，在数字上设置属性同样是不可能的。你必须准备好你的数据才能进行调整：

const exercises = [ 
{ id: 1, name: 'exercise1', sets: 3 },
{ id: 2, name: 'exercise2', sets: 2 } ,
{ id: 3, name: 'exercise3', sets: 4 } 
].map(exercise => ({
id: exercise.id,
name: exercise.name,
sets: Array.from(
{ length: exercise.sets },
() => ({ completed: false })
),
}))

Answer 2

您可以用完成的集合创建数组并进行比较(请尝试片段(：

new Vue({
el: "#demo",
data() {
return {
exercises: [{ id: 1, name: 'exercise1', sets: 3 }, { id: 2, name: 'exercise2', sets: 2 }, { id: 3, name: 'exercise3', sets: 4 }],
finishedSets: []
}
},
computed: {
checkAll() {
return this.exercises.reduce((acc, curr) => acc + curr.sets, 0) === this.finishedSets.length
}
},
methods: {
compareObjects(o1, o2) {
return Object.entries(o1).sort().toString() !== Object.entries(o2).sort().toString()
},
findObject(id, set) {
return this.finishedSets.find(f => f.id === id && f.set === set)
},
completeSet(id, set) {
this.findObject(id, set) ? 
this.finishedSets = this.finishedSets.filter(f => {return this.compareObjects(f, this.findObject(id, set))}) :
this.finishedSets.push({id, set})
},
isFinished(id, set) {
return this.findObject(id, set) ? true : false
},
}
})

.set {
width: 70px;
cursor: pointer;
}
.finished {
background-color: seagreen;
}
.finished__not {
background-color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-for="exercise in exercises" :key="exercise.id">
<span> {{ exercise.name }} </span>
<div v-for="set in exercise.sets" :key="set">
<div @click="completeSet(exercise.id, set)" class="set" :class="isFinished(exercise.id, set) ? 'finished' : 'finished__not'"> {{ set }} <span>
<span v-if="isFinished(exercise.id, set)">finished</div>
</div>
</div>
<button v-if="checkAll">submit</button>
<p>{{finishedSets}}</p>
</div>