编程 Javascript

vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】

Posted in Javascript onMarch 15, 2019

本文实例讲述了vue v-for循环重复数据无法添加问题解决方法。分享给大家供大家参考，具体如下：

问题：

错误提示如下：

解决问题的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue v-for循环重复数据无法添加问题</title>
  <style>
  </style>
  <script src="vue.js"></script>
  <script>
  </script>
</head>
<body>
  <div id="box">
    <input type="button" value="添加" @click="add">
    <ul>
      <li v-for="val in arr" track-by="$index">
        {{val}}
      </li>
    </ul>
  </div>
  <script>
    var vm=new Vue({
      data:{
        arr:['apple','pear','orange']
      },
      methods:{
        add:function(){
          this.arr.push('tomato');
        }
      }
    }).$mount('#box');
  </script>
</body>
</html>

注意：这里在<li v-for="val in arr">中添加了track-by="$index"

即：

<li v-for="val in arr" track-by="$index">

希望本文所述对大家vue.js程序设计有所帮助。

vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】

- Author -

白杨-M

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 二分法(数组array)

Apr 24 Javascript

jquery滚动条插件jScrollPane的使用介绍

Nov 08 Javascript

JavaScript中的lastIndexOf()方法使用详解

Jun 06 Javascript

js获取html的span标签的值方法(超简单)

Jul 26 Javascript

easyui-datagrid特殊字符不能显示的处理方法

Apr 12 Javascript

Three.js开发实现3D地图的实践过程总结

Nov 20 Javascript

详解vue移动端项目的适配(以mint-ui为例)

Aug 17 Javascript

详解一个基于套接字实现长连接的express

Mar 28 Javascript

vue项目创建并引入饿了么elementUI组件的步骤

Apr 11 Javascript

js console.log打印对象时属性缺失的解决方法

May 23 Javascript

vue实现计算器功能

Feb 22 Javascript

vue 获取url里参数的两种方法小结

Nov 12 Javascript

详解vue移动端项目代码拆分记录

Mar 15 #Javascript

小程序自定义单页面、全局导航栏的实现代码

Mar 15 #Javascript

使用webpack搭建vue项目实现脚手架功能

Mar 15 #Javascript

vue使用el-upload上传文件及Feign服务间传递文件的方法

Mar 15 #Javascript

详解用vue2.x版本+adminLTE开源框架搭建后台应用模版

Mar 15 #Javascript

浅谈KOA2 Restful方式路由初探

Mar 14 #Javascript

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

Mar 14 #Javascript