代码设置单选框选中后计算结果未更新问题求助

兄弟，我太懂你这个困扰了！手动通过代码把第三个单选框设为选中后，输出结果愣是不跟着textarea的内容走，明明点单选框本身就正常，这事儿确实闹心😅

问题根源 #

你应该是直接通过DOM操作（比如document.getElementById('xxx').checked = true）来设置单选框的选中状态吧？这种方式绕开了框架的响应式系统（看你用了@click，大概率是Vue），框架根本不知道状态已经变了，自然不会重新计算输出结果。

正确的解决思路 #

别直接碰DOM！改用框架的绑定机制来控制单选框状态，让框架能感知到变化，这样计算结果就会自动更新了。给你举个完整的示例：

模板部分

<div>
  <!-- 前两个常规单选框，绑定到selectedOption -->
  <input type="radio" id="opt1" value="选项1" v-model="selectedOption">
  <label for="opt1">选项1</label>

  <input type="radio" id="opt2" value="选项2" v-model="selectedOption">
  <label for="opt2">选项2</label>

  <!-- 第三个关联textarea的单选框，value设为标识值比如'custom' -->
  <input type="radio" id="opt3" value="custom" v-model="selectedOption">
  <label for="opt3">自定义内容</label>
  <!-- textarea绑定自定义内容，点击时更新选中状态 -->
  <textarea v-model="customContent" @click="selectCustomOption"></textarea>

  <!-- 输出结果，用计算属性判断显示内容 -->
  <p>当前输出：{{ finalOutput }}</p>
</div>

脚本部分

export default {
  data() {
    return {
      selectedOption: '选项1', // 默认选中第一个选项
      customContent: '' // 存储textarea的内容
    }
  },
  computed: {
    finalOutput() {
      // 如果选中自定义选项，返回textarea内容，否则返回单选框的值
      return this.selectedOption === 'custom' ? this.customContent : this.selectedOption
    }
  },
  methods: {
    selectCustomOption() {
      // 这里直接修改绑定的变量，而不是操作DOM！
      this.selectedOption = 'custom'
    }
  }
}

为什么这样能行？ #

通过v-model把单选框的选中状态和selectedOption变量绑定后，只要修改这个变量，Vue的响应式系统就会立刻察觉到变化：

1. 自动把对应的单选框设为选中状态
2. 触发计算属性finalOutput重新计算，更新页面上的输出结果

这样不管是用户手动点单选框，还是点击textarea触发选中，输出结果都会实时跟着走啦！

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