跳至主要內容

记录一次:封装el-cascader组件后默认值一旦被改变无法回显的问题

程序员诚哥大约 1 分钟若依若依前端

BUG描述

默认值是苏州/苏州东,一旦被修改,无法改回来。如下图,我修改了值为苏州/苏州西,然后再改回苏州/苏州东失败。

bug分析

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。
但是Vue 不能检测以下数组的变动:

当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

回到我自己的代码里,这段代码引起了默认值被修改后无法回显

解决方案

修改代码中place的赋值位置,即可解决此问题。

上次编辑于:
贡献者: zccbbg