vue 中this.$set 动态绑定数据的案例讲解

下面我将详细讲解“vue 中this.$set 动态绑定数据的案例讲解”的攻略。

什么是 this.$set

在 Vue 的数据绑定中，如果数据中的某个属性值是对象或数组，并且需要动态修改其中的某个属性，而且这个属性还需要双向绑定，那么 Vue 提供的双向绑定语法可能会失效。这时，就需要使用 this.$set 来动态绑定数据。

this.$set 是 Vue 提供的一个实例方法，它可以动态地给一个对象或数组添加一个新属性，并触发页面的重新渲染，实现视图和数据的双向绑定。

this.$set 方法的用法如下：

Vue.set(obj, prop, value)

其中，obj 表示要添加属性的对象或数组，prop 表示要添加的属性名，value 表示要添加的属性值。

例子 1

现在，假设我们有一个数据对象 person，其中包含一个 name 属性和一个 grades 数组。我们需要动态地修改 grades 数组中某个元素的值，并且要在页面上显示相应的变化。

首先，我们需要给 grades 数组添加一个新元素：

this.$set(this.person.grades, 3, 80);

这段代码表示，给 person.grades 数组添加一个索引为 3 的元素，元素的值为 80。如果这个位置原来没有元素，那么会自动添加一个值为 undefined 的元素，然后再将其替换为我们要添加的值。

在这个例子中，this.person.grades 是我们要添加属性的对象或数组，3 是要添加的属性名，80 是要添加的属性值。

例子 2

再来看另外一个例子。假设我们有一个数组 items，其中每个元素都包含一个 text 属性和一个 completed 属性，我们需要动态地修改数组中某个元素的 completed 属性，并且要在页面上显示相应的变化。

首先，我们需要获取要修改的数组元素的索引：

let index = this.items.findIndex(item => item.id === id);

这段代码表示，根据元素的 id 属性在数组中查找要修改的元素，并返回其索引。

接着，我们可以使用 this.$set 来修改数组元素的 completed 属性：

this.$set(this.items[index], 'completed', true);

这段代码表示，给 items 数组中的第 index 个元素添加属性 completed，属性值为 true。

总结

this.$set 方法是 Vue 提供的一个实例方法，用于动态绑定数据，实现视图和数据的双向绑定。在修改对象或数组中某个属性的值时，如果用 Vue 的双向绑定语法无法实现绑定，就需要使用 this.$set 方法来给对象或数组添加一个属性。这个方法的用法比较简单，可以根据需要进行调用。