【在Vue项目中如何监测数组或对象中值的变化呢？】

在Vue项目中如何监测数组或对象中值的变化呢？

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

详细描述

截图

代码

<template>
  <div class="hello">
    <div>
      请输入姓名： <input type="text" v-model="data.name" style="border: 1px solid black;">
      请输入年龄： <input type="text" v-model="data.age" style="border: 1px solid black;">
    </div>
    <div style="padding: 10px 50px;">
      <div style="margin: 10px;">姓名：{{data.name}}</div>
      <div>年龄：{{data.age}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      data: {
        name: 'zhangsan',
        age: 21
      },
      watch: {
        data: function (newValue, oldValue) {
          console.log(newValue, oldValue);
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

编辑于2024-11-24

时间排序

热门排序

[成都|荣耀师兄]JS-胡力耘
0
如果这个对象用于列表渲染，那么在Vue的官方文档中明确写出，单独更改某一个值，是不会触发视图的更新。因为该对象的地址并没有得到更新。

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样做：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
那么，如果是通过watch来监听某些值的变化，则需要加上deep属性
```
watch: {
  data2: {
    handler (newValue, oldValue) {
      console.log(newValue, oldValue);
    },
    deep: true
  },
}
```
这样就可以成功的监听到data数组中值的变化了。
查看全部>
编辑于2018-07-30

去第页