gpt4 book ai didi

vue.js - 使用 v-for 单击时反转 bool 值?

转载 作者:搜寻专家 更新时间:2023-10-30 22:42:09 24 4
gpt4 key购买 nike

JS 和 VueCLI 的初学者,所以我会尽力解释。我正在使用 Express 作为我的后端。

我正在尝试通过单击更改我的对象数组中的 bool 值。我能够做到这一点,但是当我在 v-for 循环中单击不同的列表项时,它会翻转我数组的所有其他索引中的 bool 值。这是我的代码:

express :/路线:

        // fake data store
const tasks = [
{ id: 1, task: 't1', completed: false},
{ id: 2, task: 't2', completed: false},
{ id: 3, task: 't3', completed: false}
];

/**
* GET handler for /tasks route
* @returns {Array.<{id: Number, task: String, completed: Boolean}>} array of task objects
*/
router.get('/', (req, res) => {
res.send(tasks);
});

网络应用:

        /**
* GET /tasks
* @returns Promise => {Array.<{id: Number, task: String, completed: Boolean}>} array of task objects
*/
export function getTasks() {
return request('tasks');
}

现在是我的 Vue 组件:

        <template>
<div id="tasks">
<h2>Movies to Add</h2>
<ul class="todo-list">
<li v-for='task in tasks' :id="task.id" v-on:click="completeMovie($event)" :key='task.id' class="todo-list__li">
<input class="todo-list__input" type="checkbox" :name='task.task' :id="task.task">
<div class="todo-list__checkbox">
<span class="todo-list__checkbox-inner"><i></i></span>
</div>
<label :for='task.task'>{{ task.task }}</label>
</li>
</ul>
</div>
</template>

<script>
import {getTasks} from './../../services/tasks';

export default {
name: 'TaskList',
data: function() {
return {
tasks: []
};
},
created: function() {
getTasks()
.then(res => this.tasks = res);
},
methods: {
completeMovie: function (event) {
var taskId = event.currentTarget.id -1;

getTasks()
.then((res) => {
this.tasks = res;
res[taskId].completed = !res[taskId].completed;
});
}
}
}
</script>

因此,当我单击第一个列表项时,它会将 Task: t1 更改为 True,但如果我单击第二个列表项,它会将 t1 更改回 False,将 t2 更改回 True。我不确定我做错了什么。我什至不确定这是最好的方法。我的主要问题是我不确定为什么会这样。

非常感谢任何帮助!

最佳答案

你可能把这个复杂化了。

你只需要

<li v-for="task in tasks" :key="task.id" 
@click="task.completed = !task.completed"
class="todo-list__li">

演示~ https://jsfiddle.net/xy1q0auL/2/

没有(很明显)每次单击任务时都需要重新获取任务。这就是您之前的更改被重置的原因;这是因为您使用 getTasks() 中未修改的值覆盖了所有数据。

关于vue.js - 使用 v-for 单击时反转 bool 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52406941/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com