首页 search(key) { this.flowerPage = this.flowerList.filter((item) => { if (item.flowerName.indexOf(key) == 0) return true }) this.page.total = this.flowerPage.length; }, addCart(flower) { this.$store.commit('ADDCART', flower); this.$message({ type: 'success', message: '添加购物车成功' }); }

search(key) { this.flowerPage = this.flowerList.filter((item) => { if (item.flowerName.indexOf(key) == 0) return true }) this.page.total = this.flowerPage.length; }, addCart(flower) { this.$store.commit('ADDCART', flower); this.$message({ type: 'success', message: '添加购物车成功' }); }

时间: 2024-02-10 22:34:37 浏览: 53

vue中 this.$set的用法详解

5星 · 资源好评率100%

在Vue.js框架中，`this.$set` 是一个关键的方法，用于处理响应式数据更新的问题。在某些情况下，当你尝试直接修改对象的属性或数组的元素时，Vue可能无法检测到这些变化，进而不会自动更新视图。`this.$set` 方法就是为了解决这个问题而设计的，它可以确保即使在非响应式对象上添加或修改属性，Vue也能正确地追踪变化并更新视图。我们来看一个简单的例子。在这个例子中，我们有一个`items`数组，包含三个对象，每个对象都有`message`和`id`属性。我们在模板中使用`v-for`指令遍历这个数组，并显示`message`属性的值。 ```html <template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.message}}</p> <button class="btn" @click="handClick()">更改数据</button> </div> </template> ``` 在`mounted`生命周期钩子中，我们尝试直接修改`items`数组的第一个对象，将其替换为一个新的对象。然而，这样做并不会触发Vue的视图更新，因为Vue无法感知到这个变化。 ```javascript mounted () { this.items[0] = { message: 'first', id: '4' }; // 视图不会更新 } ``` 为了使视图能够响应这个变化，我们可以使用`this.$set`方法： ```javascript mounted () { let art = { message: 'first', id: '4' }; this.$set(this.items, 0, art); // 使用$set更新视图 } ``` 在`methods`中，我们定义了一个`handClick`方法，它改变了`items`数组第一个对象的`message`属性。由于我们直接修改了对象的属性，Vue不会检测到这个变化。为了解决这个问题，我们再次使用`this.$set`： ```javascript methods: { handClick() { let change = this.items[0]; change.message = 'shen'; this.$set(this.items, 0, change); } } ``` `this.$set`方法的调用方式如下： ```javascript Vue.set(target, key, value); ``` - `target`：需要更改的数据源，可以是对象或数组。 - `key`：要更改的具体数据，如果是对象则是属性名，如果是数组则是索引。 - `value`：要重新赋的值。总结一下，`this.$set`在Vue中的作用主要有以下几点： 1. 当向响应式对象添加新属性时，确保Vue能追踪这个属性并响应视图更新。 2. 当修改数组元素时，特别是直接修改对象属性而不是替换整个对象时，保证Vue能够检测到变化并更新视图。 3. 在对象的属性不存在时，`this.$set`会创建该属性并使其变为响应式。 `this.$set`是Vue中一个非常实用的方法，尤其在处理动态添加属性或修改深层嵌套对象属性时，能够确保视图与数据的同步，避免出现预期之外的行为。在开发过程中，尤其是在处理非预定义的属性或数组元素时，合理使用`this.$set`能够提高代码的健壮性和可维护性。

这段代码是一个Vue组件中的方法，用来实现商品列表页的搜索和添加购物车的功能。其中，search方法接受一个关键字key作为参数，通过过滤器对商品列表进行筛选，找出商品名以该关键字开头的商品，将筛选结果保存在this.flowerPage中，并更新分页器的总页数(this.page.total)。 addCart方法用来添加商品到购物车，它接受一个商品对象flower作为参数，使用Vuex的mutation函数ADDCART来将商品添加到购物车中。添加成功后，使用Element UI的$message方法弹出一个提示框，提示用户添加购物车成功。需要注意的是，这两个方法中使用了Vue组件的数据绑定和计算属性等特性，以及Vuex状态管理库来实现数据的共享和状态的管理。

阅读全文