在VUE js中获取数组中数据的索引

2023-12-21

我想在调用特定方法时更改任务的状态。但问题是我无法获取数组特定项目的索引来更改其状态。 这是我的 HTML:

<div class="main" id="my-vue-app">
    <ul>
        <li v-for="task in completeTask">
            {{ task.description }} <button @click="markIncomplete">Mark as Incomplete</button>
        </li>

    </ul>
    <ul>
        <li v-for="task in incompleteTask">
            {{ task.description }} <button @click="markComplete">Mark as Complete</button>

        </li>
    </ul>
</div>

这是我的 Vue:

<script>
    new Vue(
        {
            el: '#my-vue-app',
            data:
            {
                tasks: [
                {description:'go to market', status: true},
                {description:'buy book', status: true}, 
                {description:'eat biriani', status: true}, 
                {description:'walk half kilo', status: false}, 
                {description:'eat icecream', status: false}, 
                {description:'return to home', status: false}
                ]
            },
            computed: 
            {
                incompleteTask()
                {
                    return this.tasks.filter(task => ! task.status);
                },
                completeTask()
                {
                    return this.tasks.filter(task => task.status);
                }
            },
            methods: 
            {
                markComplete()
                {
                    return this.task.status = true;

                },
                markIncomplete()
                {
                    return this.task.status = false;
                }
            }
        }
    )
</script>

我需要利用markComplete() and markIncomplete()但问题是我找不到获取当前元素的索引以更改其状态的方法。


您可以通过以下方式获取索引声明第二个参数v-for https://v2.vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for:

<li v-for="(task, index) in incompleteTask">
    {{ task.description }} <button @click="markComplete(index)">Mark as Complete</button>
</li>
    methods: 
    {
        markComplete(index)
        {
            return this.tasks[index].status = true;

        },

但是,也许更简单的替代方法是简单地**将“任务”作为参数传递**:
<li v-for="task in incompleteTask">
    {{ task.description }} <button @click="markComplete(task)">Mark as Complete</button>
</li>
    methods: 
    {
        markComplete(task)
        {
            return task.status = true;

        },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在VUE js中获取数组中数据的索引 的相关文章

  • 动态表中每个按钮的 Jquery-Ui 对话框表单

    我正在生成一个 HTML 表 每行都有一个按钮 必须打开 Jquery ui 对话框表单 The table table class table table reporting table condensed table striped t
  • 通过 jquery/javascript 在警报或确认对话框中单击“确定”?

    我正在考虑在backbone js 和jquery 中编写一些UI 测试 它们可能不是最好的方法 但这是我正在考虑的事情 通过纯代码自动化测试而无需记录和回放 使用这种方法唯一让我摸不着头脑的是 在某些 用例流程 执行的 中 会出现确认 警
  • 获取请求的客户端 IP 地址而不是 Cloudflare 的 IP 地址

    Cloudflare 会更改传入请求的 IP 地址 因为 Cloudflare 是我的网站和互联网之间的中间件 代理 我该怎么办获取请求的初始IP地址 而不是 Cloudflare 的 IP 地址 我听说过mod cloudflare但是这
  • 在 JavaScript 中定位提示弹出窗口

    我有一个如下所示的 JavaScript 提示 我想将提示放在屏幕中心 如何使用 javascript 做到这一点 function showUpdate var x var name prompt Please enter your na
  • 在 IE10 中禁用捏合放大

    在 IE10 触摸模式下 我希望仅使页面的特定部分可缩放 其余的不应该 我找到了这个 http msdn microsoft com en US library ie hh772044 aspx http msdn microsoft co
  • JavaScript:从 JavaScript 调用锚标记的点击事件

    我有一个带有锚标记的页面 在我的 JavaScript 中 我设置HREF锚标记的属性基于一些 if else 条件动态变化 现在我想以编程方式调用锚标记的单击事件 我使用了下面的代码 但没有成功 var proxyImgSrc CostM
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • 带时间戳的 Firestore 查询

    如果它是文本字段 我可以使用 where 条件获取数据 但是当我尝试对时间戳字段和日期执行相同操作时 事情不起作用 这是我的代码 home ts firebase firestore collection cities where time
  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • 仅在首页加载时使用 cookie 加载 colorbox

    我尝试了来自网络的参考代码 仅在页面加载时加载特定元素一次 这是示例代码
  • 如何生成 JavaScript 堆栈跟踪? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗 较新的浏览器 Chrome 和 Firefox 公开了一个允
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • Javascript:更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输
  • WordPress 中的 add_action 函数

    嗯 我正在学习创建一个 WordPress 插件 我下载了一个并阅读了代码 然后我看到了这个 我假设 foo 是它将添加操作的标签 但是 array 到底是做什么的呢 add action foo array foo1 foo2 我在看ht
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试
  • openssl_pkey_get_details($res) 不返回公共指数

    我在用着这个例子 https stackoverflow com a 12575951 2016196使用 php 生成的密钥进行 javascript 加密openssl图书馆 但是 details openssl pkey get de
  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value

随机推荐

  • C# EPPlus 合并 Excel 文件

    我想在 C 中使用 EPPlus 合并多个 Excel 文件 我做了以下事情 using MemoryStream protocolStream new MemoryStream ExcelPackage pck new ExcelPack
  • 如何使用 pandas.date_range() 获取指定开始日期和结束日期之间具有 n 个指定周期(相等)的时间序列

    我想获取开始日期和结束日期之间的 n 个日期的列表或系列 包括这些界限 但是 dateIndex pd date range start dt datetime today date end pd to datetime expiry da
  • 使用 python 请求在 google 上进行简单查询时出现错误 429

    我正在尝试通过 Google 上的简单查询获得第一个非广告结果 res requests get https www google com q query 为查询分配任何值 您都会收到错误 我尝试添加一些标题 但没有任何变化 我尝试添加谷歌
  • 如何根据 Cargo 功能选择性地传递 rustc 标志?

    我正在编写的程序运行速度要快得多 C target cpu native标志被传递到rustc 我想为用户提供一种简单的 与平台无关的方式来在编译时启用此功能 因此我添加了 Cargo 功能cpu native 在 Cargo toml 中
  • 仅当数据加载到闪亮的应用程序中时才显示框

    我制作了一个闪亮的应用程序 我想在其中上传并在旁边显示它 由于我的数据很大 所以我将其设置为可滚动并将其放入一个盒子中 现在我想仅在加载数据时显示该框 我尝试了条件面板 但没有成功 这是代码 ui R library shiny libra
  • 带有反向引用的重复析取是如何工作的?

    给定一个正则表达式 例如 a b 2 1 什么会 1参考 第一次捕获 最后一次捕获还是什么 Regex IsMatch aba a b 2 1 False Regex IsMatch abb a b 2 1 True 让我怀疑它符合last
  • java程序中的文件描述符泄漏:打开的文件太多

    我有一个程序 其文件描述符不断增加 我看到当我执行命令 ls l proc 5969 fd 时 其中 5969 是 java 程序的 pid 文件描述符的数量不断增加 但我无法打开这些文件描述符之一来查看哪些文件保持打开状态 这是列表的示例
  • dart 如何获取带索引的枚举?

    我定义了一个枚举 enum TestEnum test1 test2 我想用索引创建一个枚举 E buildEnum
  • Jax-ws java.net.ConnectException:连接被拒绝

    我在使用 JAX WS Metro 从 Tomcat 上运行的 Java 客户端连接到 glassfish 上运行的 Web 服务时遇到奇怪的网络问题 这是场景 两台服务器都在我的本地计算机上运行 如果我将客户端配置为使用 127 0 0
  • Android - 检索存储在 Cloud Firestore 文档中的自定义对象

    我使用 Cloud Firestore 的方式如下 事件 集合包含使用唯一事件 ID 作为名称的文档 这些文档中有许多 EventComment 对象 每个对象代表用户所做的评论 要将 EventComment 对象添加到文档中 我使用以下
  • Fabricjs - 仅通过边框选择

    我在用着Fabric js https github com fabricjs fabric js在画布上绘制一些矩形 默认行为是在矩形内部单击将其选中 如何更改行为 以便仅在单击矩形边框时才选择它 单击矩形内部但不在边框上单击不会执行任何
  • Charles 中的自定义 CA 证书,无需密码

    我正在使用优秀的Charles http www charlesproxy com 代理使 Web 调试更容易 我正在使用它的 SSL 代理功能 并安装了通用CA证书 http www charlesproxy com documentat
  • CURL 忽略主机/apache 配置

    这是一个奇怪的问题 我的本地计算机上配置了 apache 中的虚拟主机 以便接受类似的请求http dev myproject com http dev myproject com 我的主机文件包含相应的条目 例如 127 0 0 1 de
  • 在eclipse中导入一个javascript项目

    我想知道是否可以将我的 javascript 库分离到不同的 eclipse 项目中 然后将它们导入到另一个动态 Web 项目中 就像我通常对常规 java 子项目所做的那样 这个答案 在 Eclipse 中将 JavaScript 项目与
  • 运行“粘贴”时出现 VBA 运行时错误 438

    我刚刚熟悉 VBA 和我的代码 For k 3 To ThisWorkbook Sheets Count ThisWorkbook Sheets k Activate ActiveSheet Cells 11 2 Select lLastR
  • 查找常见编辑的算法

    我有两个单词列表 例如 list 1 list 2 foot fuut barj kijo foio fuau fuim fuami kwim kwami lnun lnun kizm kazm 我想找到 o u 1 and 3 i a 3
  • 不同项目中多个类的基类

    这更多的是一个设计问题 目前 我有多个类 在不同的项目中 它们具有不同的角色 但有一种通用方法可以执行相同的职责 我正在考虑为所有这些类建立一个基类 以便每个类都可以继承这个类并实现这个方法以节省重复 我的问题是 我应该为多个项目中的所有类
  • 一名读者。一位作家。关于互斥体和原子内置函数的一些常见问题

    我有一个父线程和一个共享 bool 标志和 std vector 的工作线程 父级仅读取 即读取 bool 或调用 my vector empty 工人只写 我的问题 我需要互斥保护布尔标志吗 我可以说所有 bool 读 写本质上都是原子操
  • 代码是启发式无法访问的

    与 检测到无法访问的代码 相比 这意味着什么 启发式无法访问意味着代码可能无法访问 无法访问的代码肯定是无法访问的
  • 在VUE js中获取数组中数据的索引

    我想在调用特定方法时更改任务的状态 但问题是我无法获取数组特定项目的索引来更改其状态 这是我的 HTML div class main ul li task description li ul div