问题描述
在 Vue.js 的开发中，经常会使用 v-for 指令来循环遍历数据。在遍历对象时，我们使用 v-for="(value, key) in obj" 的语法，其中 obj 代表要遍历的对象，value 和 key 分别代表对象的属性值和属性名。然而，在某些情况下，我们如果改变了对象的属性值，界面上对应的元素却没有更新。
例如，下面的示例代码中，我们定义了一个简单的对象 obj，并使用 v-for 遍历它的属性：
-- -------------------- ---- ------- ---------- ----- ---- -------------- ---- -- ---- ----------- -- --- -- - -- ----- -- ------- --------------------------------- --------------- ------ ------ ----------- -------- ------ ------- - ------ - ------ - ---- - ---- ------ ---- ------ -- -- -- -------- - ----------------- - ------------- -- ---- -- -- -- ---------展开代码
在这个示例中，我们在点击每个元素对应的按钮时，会将其对应属性的值加上一个感叹号。然而，我们发现点击按钮后，虽然 obj 对象的属性值已经被更新了，但是界面上相应的元素却没有更新。这是因为 Vue.js 的响应式系统在遍历对象时，是对对象本身进行监听的，而不是对对象的属性进行监听。
解决方法
为了解决这个问题，我们需要对对象的属性进行重新赋值，以触发 Vue.js 的响应式更新。实现方法如下：
-- -------------------- ---- ------- ---------- ----- ---- -------------- ---- -- ---- ----------- -- --- -- - -- ----- -- ------- --------------------------------- --------------- ------ ------ ----------- -------- ------ ------- - ------ - ------ - ---- - ---- ------ ---- ------ -- -- -- -------- - ----------------- - -------- - - ------------ ------ ------------- - ---- -- -- -- -- ---------展开代码
在这个解决方法中，我们使用了对象的扩展语法来拷贝对象的原有属性，然后对指定属性进行重新赋值，拷贝的操作是为了不影响原有对象的引用关系。
学习意义
在 Vue.js 的开发中，对于对象的遍历，我们通常使用 v-for 指令来实现数据的渲染。而在遍历对象时，我们需要注意到 Vue.js 的响应式系统是对整个对象进行监听的，而不是对对象的每个属性进行监听。如果我们直接修改对象的属性值，可能会导致界面上的对应元素无法更新。因此，对于遍历对象时要修改其属性值的情况，我们需要使用重新赋值的方法来触发 Vue.js 的响应式更新。
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- ---------- ----- ---- -------------- ---- -- ---- ----------- -- --- -- - -- ----- -- ------- --------------------------------- --------------- ------ ------ ----------- -------- ------ ------- - ------ - ------ - ---- - ---- ------ ---- ------ -- -- -- -------- - ----------------- - -------- - - ------------ ------ ------------- - ---- -- -- -- -- ---------展开代码
在点击每个元素对应的按钮时，都会将其对应属性的值加上一个感叹号，并触发界面的更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b99800306f20b3a680ad2e
