vue.js - 使用 v-for 在单击时反转布尔值?
问题描述
JS 和 VueCLI 的初学者,所以我会尽力解释。我使用 Express 作为我的后端。
我正在尝试在单击时更改对象数组中的布尔值。我能够做到这一点,但是当我单击 v-for 循环中的不同列表项时,它会翻转我数组的所有其他索引中的布尔值。这是我的代码:
快递:/路线:
// 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()
。
推荐阅读
- if-statement - 追踪止损在条件成立时移动。松脚本
- android - 映射流内容时如何处理未处理的异常?
- json - Azure 数据工厂无法读取 YouTube 报告 API JSON 文件的架构
- sql-server - 如何在 SQL Server 中获取前 12 个月的数据并避免当前月份
- ruby-on-rails - 如何在 Rails 中获取嵌套创建记录的 ID?
- javascript - 带有对象数组的表单处理 Vuex
- python - 如何比较具有 O(n) 复杂度的 2 个链表元素?(Python)
- graphql - 是否可以与 Appsync GrapQL 建立内部连接?
- javascript - 轻量级 JSON API 服务器,通过 Python 应用程序为前端 HTML GUI 提供服务
- javascript - 迭代大量对象是更改/添加值的“正确方法”吗?