【问题标题】：how to update 2 attributes with one radio button?如何使用一个单选按钮更新 2 个属性？
【发布时间】：2016-06-23 21:05:49
【问题描述】：

我不确定我是否只是停留在 jQuery 思维模式中，但有没有办法用一个单选按钮更新 2 个模型属性？目前我有 2 个单选按钮，其中一个是隐藏的。可见的通过@click 事件检查第二个，该事件获取下一个输入并将其设置为 true。

var app = new Vue({

  data: {
    order: { 
      amount: 
      type:
    }
  },

  methods: {
    selectType: function(e) {
      e.currentTarget.getElementSibling.checked = true;
    }
  }
}); 

<form>
  <input type="radio" v-model="order.amount" value=15 @click="selectType">$15</input><br>
  <input type="radio" v-model="order.type" value="small" style="display:none">

  <input type="radio" v-model="order.amount" value=15 @click="selectType">$15</input><br>
  <input type="radio" v-model="order.type" value="med" style="display:none" @click="selectType">

  <input type="radio" v-model="order.amount" value=20 >$20</input><br>
  <input type="radio" v-model="order.type" value="large" style="display:none">
</form>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

按照我的理解，v-model 语法最适合绑定单个值。您可以尝试以某种方式将该值设为 JSON 字符串，然后对其进行解码……但这听起来是个坏主意。以下是三个想法：

使用 JQuery 和 Vue

相反，您可以为所需的每个值提供单选按钮属性，然后在点击回调中解析出这些属性。例如：

<input type="radio" name="rad" btn-amount="10" btn-type="small" @click="selectType($event)">$15 <br>
<input type="radio" name="rad" btn-amount="15" btn-type="med" @click="selectType">$15<br>
<input type="radio" name="rad" btn-amount="20" btn-type="large" @click="selectType">$20<br>

然后是一个方法：

selectType: function(e) {
  this.order.amount = $(e.currentTarget).attr('btn-amount');
  this.order.type = $(e.currentTarget).attr('btn-type');
}

Here's a JSFiddle 正在展示它。

仅使用 Vue

或者，您可以将选项的数据移动到 vue 实例中，而不是将它们放在单选按钮上。例如，将options 数组添加到数据中，并在 HTML 中对其进行迭代以创建按钮

<div v-for="option in options">
  <input type="radio" name="rad" @click="selectType(option)">${{ option.amount }}
</div>

请注意，您可以将 for 循环中的当前 option 传递给单击处理程序！这意味着您可以将selectType 写为：

selectType: function(option) {
  this.order = option;
}

这非常干净，如果您打算保持单选按钮功能简单，我建议您这样做。

Here is a JSFiddle 正在展示它。

使用 Vue 组件

但是，如果您打算让事情变得更复杂，您可能希望将单选按钮功能封装到一个组件中。

考虑模板：

<template id="radio-order">
  <div>
    <input type="radio" :name="group" @click="setOrder">${{ amount }}
  </div>
</template>

及其相关组件：

Vue.component('radio-order', {
  template: '#radio-order',

  props: ['group', 'amount', 'type'],

  methods: {
    'setOrder': function() {
      this.$dispatch('set-order', {
        amount: this.amount,
        type: this.type
      })
    }
  }
});

现在您可以制作<radio-order> 组件，在单击时调度set-order 事件。父实例可以监听这些事件并采取适当的行动。

诚然，这种方法更冗长。但是，如果您正在考虑实现更复杂的功能，这可能是可行的方法。

Here's a JSFiddle 在行动中。

当然，解决问题的方法还有很多，但希望这些想法对你有所帮助！

【讨论】：