javascript - 如何用一个单选按钮更新 2 个属性？

Question

我不确定我是否只是陷入了 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>

Answer 1

按照我的理解，v-model语法最适合绑定(bind)单个值。您可以尝试以某种方式使该值成为 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>

请注意，您可以传递当前的 option在点击处理程序的 for 循环中!这意味着你可以写 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它在行动。

当然，还有很多方法可以解决这个问题，但我希望这些想法对您有所帮助!