Vue:检查选中了哪个复选框，并根据不同的情况发送不同的数据

Question

被另一个复选框有条件地禁用的单选窗体。一个单选按钮可以发送true:false，另一个单选按钮有一个发送数据的输入。

我可以做什么检查来确定哪个无线电被检查，以及如何发送true:false或数据。

  <input type="radio" id="one"
  value="Voicemail"
  v-bind:disabled="!checked"
  v-model="checkedValue">
  <label for="one">Voicemail</label>

  <input type="radio" id="two"
  value="Destination"
  v-bind:disabled="!checked"
  v-model="checkedValue">

  <label for="two">Destination</label>
  <input type="text" v-model="destinationNumber" v-bind:disabled="!checked">
  <button class="button" type="submit" name="button" v-bind:disabled="!checked">Submit</button>

data () {
  return {
      checked: '',
      checkedValue: '',
      destinationNumber: ''
  }
},
methods: {
  handleExtensionFormSubmit () {
    const postData = {
      destination: this.checkedValue = 'Destination' ? this.destinationNumber : '',
      voicemail: this.checkedValue = 'Voicemail' ? true : ''
    }

this.$http.put(/someUrl)

我的请求应该是这样的：

destination: 666,
voicemail: false

或

destination: '',
voicemail: true

感谢所有的帮助。

Answer 1

现在你的代码的主要问题是你的post对象。

postData = {
  destination: this.checkedValue = 'Destination' ? this.destinationNumber : '',
  voicemail: this.checkedValue = 'Voicemail' ? true : ''
}

this.checkedValue = 'Destination'没有检查任何内容，它正在将checkedValue的值设置为Destination，该值将始终计算为true。您需要将这两个参数都更改为==。此外，如果您想为语音邮件返回false，则需要?true:false而不是?true:''。我不确定你的所有代码到底应该做什么，但这应该会让你走上正确的道路。