我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性
<template>
<div class="hello">
<button @click="setMessage">添加属性</button>
{{ student.name }}
<input type="text" v-model="student.age">
</div>
</template>
<script>
export default {
data() {
return {
student: {
name: '张三', } } },
methods: {
setMessage() {
this.student.age = 15
console.log(this.student) } }}
</script>
当我们点击按钮,为student添加一个age属性,看看视图层是否能够更新
在这里我们发现虽然这个对象身上已经有了该属性,但是视图层并没有更新该数据,因为由于JavaScript的限制,vue.js不能监听对象属性的添加和删除,因为在vue组件初始化的过程中,会调用getter和setter方法,所以该属性必须是存在在data中,视图层才会响应该数据的变化
解决方法一:
使用this.$set(obj, key, value)/vue.set(obj, key, value)
this.$set(this.student, 'age', 15)
当改变整个数组时可以这样写
this.$set(this,"data",data2)
this指向全局,"“data”"为data中已经定义的数组
解决方法二:
通过Object.assign(target, sources)方法(浅拷贝)
this.student.age = 15
this.student = Object.assign({}, this.student)