javascript - 与 watch 一起使用时，Vue JS v-model 数据不会更新

Question

这是我的代码

data() {
  return {
    crop_mode: 'portrait',
    widget_data:''
  }
},

watch: {
  widget_data: function (val) {
    this.crop_mode = val.crop_mode
  },
},

此代码位于模态组件内。因此，每当打开模式时，“widget_data”就会发生变化。这个widget_data有一个“crop_mode”，需要分配给数据变量“crop_mode”

如果我 console.log val.crop_mode 这很好用，但是当我像下面那样在crop_mode 上执行 v-model 时，它不会更新选中的单选按钮。

<label class="custom-radio block">
  <input
    type="radio"
    value="portrait"
    name="crop_mode"
    v-model="crop_mode"
  />
  <span>Portrait</span>
</label>
<label class="custom-radio block">
  <input
    type="radio"
    value="landscape"
    name="crop_mode"
    v-model="crop_mode"
  />
  <span>Landscape</span>
</label>
<label class="custom-radio block">
  <input
    type="radio"
    value="square"
    name="crop_mode"
    v-model="crop_mode"
  />
  <span>Square</span>
</label>

标签： javascripthtmlvue.js

Answer 1

您应该添加deep:true选项，因为它看起来像是widget_data一个具有嵌套值的对象：

watch: {
  widget_data:{
      handler(val) {
         this.crop_mode = val.crop_mode
      },
     deep:true
    }
},