猿问

vue.js data中数组为简单数组时 添加相同元素 原先已渲染的元素会被替换?


data中数组为简单数组时 添加相同元素 原先已渲染的元素会被替换,console.log输出元素与显示 重复的元素 只渲染了一次

代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>hello vue.js</title>

    <script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>

</head>


<body>

    <!-- this is view -->

   <div id="app">

  <input v-model="newTodo" v-on:keyup.enter="addTodo">

  <ul>

    <li v-for="todo in todos">

      <span>索引:{{ $index }} 数据:{{ todo }}</span>

    </li>

  </ul>

</div>

</body>

<script type="text/javascript">

 new Vue({

  el: '#app',

  data: {

    newTodo: '',

    todos: [

    

    ]

  },

  methods: {

    addTodo: function () {

      var text = this.newTodo.trim()

      if (text) {

        this.todos.push(text)

        console.log(this.todos);

        this.newTodo = ''

      }

    }

  }

})

</script>


</html>


福卡
浏览 7601回答 2
2回答

福卡

找到问题了自问自答  :<li v-for="todo in todos" >中添加 track-by="$index" 变成<li v-for="todo in todos" track-by="$index" >如果没有唯一的键供追踪,可以使用 track-by="$index",它强制让 v-for 进入原位更新模式:片断不会被移动,而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值

guogu82

是的 index
随时随地看视频慕课网APP

相关分类

Vue.js
我要回答