el-cascader点了第二次的值替换第一次的值，第三次替换上一次的值，以此类推？

Question

 <el-form-item label="区县" prop="area">
    <el-cascader
      :options="AreaByCity"
      v-model="ruleForm.area"
      :props="AreaCity"
      placeholder="请选择区县"
      ref="cascaderAddrs"
      style="width: 100%"
      clearable
      @change="handleChangeareaCity"
    ></el-cascader>
  </el-form-item>
handleChangeareaCity(val) {
  let newitems = this.$refs['cascaderAddrs'].getCheckedNodes()[0].pathLabels
  const newInputValue = newitems[0]
  this.ruleForm.address = this.ruleForm.address + newInputValue
},

newitems[0]是直接拿到了区县的值了，现在是点击了区县追加给给this.ruleForm.address，现在点了第一个是正常的，第二次点击会追加、第三次也是点也是会追加，这不是我想要的效果

想要的效果是 点了第一次的值，赋给this.ruleForm.address，点了第二次就把第一次的值替换，第三次替换上一次的值，大佬们这个 要怎么弄呢？

Answer 1

el-cascader 点了第二次的值替换第一次的值，第三次替换上一次的值，以此类推

从这个描述来看，一般来说就是失去响应式监听。因为现在只是局部的代码块，不知道你是从哪里失去的监听。
如果可以的话 this.ruleForm.address = this.ruleForm.address + newInputValue 这种赋值操作最好是用 $set() 来做。
因为如果 this.ruleForm 如果一开始没有 address 这个变量值，你这样直接赋值就不会被监听变更。