vue中this.$set怎么用

在Vue中，使用this.$set方法可以将一个非响应式的对象或数组转化为响应式的。其语法如下：

this.$set(object, propertyName, value)

其中，object是要更新的对象，propertyName是要更新的属性名，value是要更新的新值。

举个例子，假设有一个数据data，它是一个对象，并且其中有一个属性name：

data: {
  name: 'Tom'
}

在组件中，如果需要动态更新name属性，可以使用this.$set方法：

this.$set(this.data, 'name', 'Jerry');

这样，name属性就会被更新为'Jerry'，并且会触发视图的重新渲染。

需要注意的是，如果对象是嵌套的，也需要使用this.$set方法来更新内部属性，否则内部属性的变化不会被检测到。

相关问题

vue中使用this.$set报错_this15.$set is not a function

### 回答1：
在Vue中使用this.$set(obj, key, value)方法是为了在响应式地更新对象时，能够添加新的属性而不影响数据的响应式更新。但是，当报错_this15.$set is not a function时，通常有以下几个可能的原因和解决办法：

1. Vue版本较低：请确保你的Vue版本是2.3.0及以上。因为在这个版本之前，Vue中的this.$set()方法并不是默认自带的。可以通过查看Vue的版本号来确认是否符合要求。

2. this指向错误：在Vue组件中，确保你在正确的作用域内使用了this.$set()方法。如果是在组件的回调函数或者异步操作中使用，可能会导致this指向发生变化。

3. 被操作的对象不是响应式的：this.$set()只能在响应式的对象上使用，如果传入的对象不是响应式的，会导致报错。可以使用Vue.set()方法或直接在data中声明对象的方式将其转变为响应式对象。

4. Vue的实例被重写：如果在Vue实例被重写之后再使用this.$set()方法，会导致报错。在Vue实例被重写之前或在Vue组件中正常使用this.$set()方法。

综上所述，要解决_this15.$set is not a function报错，首先确保Vue版本符合要求，然后确认使用this.$set()的作用域正确并且被操作的对象是响应式的。如果问题仍未解决，可以进一步检查是否重写了Vue实例。

### 回答2：
当在Vue中使用this.$set报错_this15.$set is not a function时，通常是因为this指向不正确或者Vue实例没有正确地初始化。

首先，确保你的Vue实例已经成功创建，并且在使用this.$set之前已经完成了初始化。一般情况下，Vue实例的初始化应该在created或mounted钩子函数中完成。

其次，检查this指向是否正确。在Vue组件中，你可以在methods中定义方法，而在方法中使用this来访问Vue实例。如果你有一个异步操作或者回调函数，并且需要在回调函数中使用this.$set，那么在回调函数中可能会丢失正确的this指向。为了确保this指向正确，你可以在异步回调函数之前将this存为一个变量。

示例代码如下：

export default {
  data() {
    return {
      message: "Hello Vue!"
    }
  },
  created() {
    // Vue实例初始化
    // 这里你可以进行一些初始化操作
  },
  methods: {
    updateMessage() {
      // 在回调函数之前存储正确的this指向
      const self = this;
      // 异步操作或者回调函数
      someAsyncOperation(function(response) {
        // 在回调函数中使用正确的this指向
        self.$set(self, 'message', response.data);
      });
    }
  }
}

通过以上方法，你应该能够成功使用this.$set来更新Vue实例中的数据，而不再遇到_this15.$set is not a function的错误。

### 回答3：
在Vue中使用this.$set工具函数来动态修改响应式数据时，出现_this15.$set is not a function_的报错通常是因为this.$set函数的调用方式不正确或者Vue版本过低导致的。

首先，确保你正在使用的是Vue 2.x版本，因为在Vue 1.x版本中并没有this.$set这个函数。

其次，this.$set函数是用来给Vue实例添加响应式属性的，所以调用时需要传入三个参数，分别是对象本身、属性名和属性值。例如：

this.$set(this.obj, 'prop', value)

其中，this.obj是你想要添加属性的对象，'prop'是属性名，value是新的属性值。

另外，如果你在自定义组件的方法中使用this.$set，需要保证this指向当前组件实例。如果方法是通过普通的函数定义，可能会导致this指向错误。为了确保this指向正确，可以使用箭头函数或者使用bind()方法来绑定this。例如：

methods: {
  updateProp: function(value) {
    this.$set(this.obj, 'prop', value)
  }
}

或者使用箭头函数：

methods: {
  updateProp: (value) => {
    this.$set(this.obj, 'prop', value)
  }
}

总结一下，要解决_this15.$set is not a function_的报错，需要确保使用的是Vue 2.x版本，并且调用this.$set函数时传入正确的参数，并且保证this指向正确。

vue2 this.$set

引用\[1\]中提到了Vue.js中的响应式原理，其中涉及到了Vue.set和this.$set的关系。引用\[2\]给出了一个示例代码，展示了在Vue组件中使用this.$set的情况。在这个示例中，通过点击按钮来添加一个新的属性age到form对象中。如果直接使用this.form.age = 10来添加属性，是无法实现响应式的。而使用this.$set(this.form, age, 10)则可以成功添加属性并实现响应式。引用\[3\]也给出了另一个示例代码，展示了在Vue组件中使用this.$set来添加属性的情况。在这个示例中，通过调用changeObj和changeArr方法来分别给obj对象和arr数组添加新的属性。通过this.$set方法可以实现对对象和数组的属性添加并实现响应式。
#### 引用[.reference_title]
- *1* *2* [Vue2中$set的使用](https://blog.csdn.net/gkx19898993699/article/details/128146171)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue2中this.$set()详解](https://blog.csdn.net/weixin_56650035/article/details/118499385)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]