vue列表循环非响应式情况

最新推荐文章于 2023-04-07 15:53:12 发布

congboer

最新推荐文章于 2023-04-07 15:53:12 发布

阅读量250

点赞数

分类专栏： Vue 文章标签： Vue不响应情况

本文链接：https://blog.csdn.net/congboer/article/details/98111474

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

vue列表循环非响应式情况

数组的length无法响应
- 处理手段：使用 arr = null arr.splice( 0 )
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
- 处理手段: Vue.set / this.$set

例子：
<body>
  <div id="app">
    <button @click = "modifyFirst"> 修改第一项 </button>
    <button @click = "remove"> 清空 </button>
    <ul>
      <li v-for = "item in todos" :key = "item.id">
        <p> {{ item.task }} </p>
      </li>
    </ul>
    <button @click = "modifyFirst"> 修改第一项 </button>
    <ul>
      <li v-for = "item in items">
        {{ item }}
      </li>
    </ul>
  </div>
</body>

<script src="vue.js"></script>
<script>
  /* 
    业务： 
        1. 将todos中的第一项的task改为‘睡觉’
        2. 清空列表
  */
  new Vue({
    el: '#app',
    data: {
      todos: [
        {
          id: 1,
          task: '任务一'
        },
        {
          id: 2,
          task: '任务二'
        }
      ],
      items: ['a','b','c']
    },
    methods: {
      modifyFirst () {
        //this.items[ 0 ] = '睡觉'//这种无法起到作用

        Vue.set( this.items,'0','睡觉')

        //this.$set( this.items,'0','睡觉')//这种也可以实现

        // Vue.set底层就是  Object.assign

      },
      remove () {
        // this.todos = null     //这种可以
        // this.todos.length = 0  //这种通过操作length的不行
        this.todos.splice( 0 )   //这种可以
      }
    }
  })
</script>

congboer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue列表循环非响应式情况

vue列表循环非响应式情况数组的length无法响应处理手段：使用 arr = null arr.splice( 0 )当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue处理手段: Vue.set / this.$set例子：<body> <div id="app"> ...
复制链接

扫一扫

专栏目录