Vue组件点击事件无法获取v-model绑定数据的最新值

我一眼就看出问题出在哪啦——你用了@click来触发sendData，但Vue的响应式更新是异步的！当你点击单选按钮时，@click会立刻执行，这时候v-model还没来得及更新myContent的值，所以打印出来的自然是上一次的旧值。

下面给你几个针对性的解决方案：

方案1：改用@change事件（最推荐） #

单选按钮的change事件是在值真正修改完成后才触发的，刚好能避开Vue异步更新的时间差。只需要把模板里的@click="sendData()"替换成@change="sendData()"就行：

<label class="btn mr-05 p-0 rounded-left">
  <input type="radio" :name="myName" value="no" v-model="myContent" @change="sendData()">
  <span class="d-block p-1 px-3 text-sm rounded-left">
    <i class="fas fa-check mr-1 text-xs"></i>No
  </span>
</label>
<!-- 另外两个radio按钮也做同样的替换 -->

方案2：用$nextTick延迟获取更新后的值 #

如果你非要保留@click事件，可以借助Vue的$nextTick方法——它会等待DOM更新完成、数据同步后再执行回调函数，这样就能拿到最新的值：

methods: {
  sendData: function(){
    this.$nextTick(() => {
      console.log('data: ', this.myContent, 'source', this.dataSource);
    })
  }
},

额外提醒：父子组件的数据同步问题 #

我还注意到一个潜在问题：你的组件里myContent是本地data，虽然通过computed的setMyContent做了初始化，但之后父组件的content更新时，myContent并不会自动同步。如果需要实现父子组件的数据双向同步，正确的做法是：

1. 在组件内通过$emit把本地数据的变化通知给父组件：

methods: {
  sendData: function(){
    console.log('data: ', this.myContent, 'source', this.dataSource);
    // 通知父组件更新对应数据
    this.$emit('update:content', this.myContent);
  }
},

2. 父组件使用.sync修饰符来接收更新：

<button-group 
  title="Other Dependants" 
  name="other_dependents" 
  :content.sync="children.haveAnyOtherDependents" 
  data-source="children.haveAnyOtherDependents"
></button-group>

这样就能保证父子组件的数据始终保持一致啦！

内容的提问来源于stack exchange，提问作者UXCODA