Vue：将无线电绑定到布尔值

Question

我无法将radiobuttons绑定到模型中的布尔值。

在这个例子中：https://jsfiddle.net/krillko/npv1snzv/2/

加载时，不检查单选按钮，当我尝试更改它们时，模型中的“主要”值变为空。

我试过了：

:checked="variation.primary == true"

但没有效果。

Answer 1

要将单选按钮绑定到布尔值而不是Vue中的字符串值，请在value属性上使用v-bind：

<input type="radio" v-model="my-model" v-bind:value="true">
<input type="radio" v-model="my-model" v-bind:value="false">

我将留给您了解如何将这些值与您的后端数据相匹配。

复选框对于这种情况不太好;用户可以将它们留空，并且您没有得到答案。如果您在只需要一个答案的情况下询问是/否或真/假问题，那么您应该使用单选按钮而不是复选框。

Answer 2

你在寻找什么是checkbox。这是一个updated jsfiddle。

您的用例不是单选按钮应该如何工作。

看看这个例子。

new Vue({
  el: '#app',
  data: {
    picked: 'One',
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<div id="app">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br><br>
  <span>Picked: {{ picked }}</span>
</div>

Answer 3

将类型从收音机替换为复选框，它应该工作

<input type="checkbox" v-model="variation.primary" name="Test">

Answer 4

我自己也遇到了这个问题，要记住的是，value属性实际上不应该改变单选按钮，更改（以及你需要绑定的内容）是checked属性。

然后，您需要处理change事件以在数据中设置正确的项目值。

基于你的jsFiddle，我认为这就是你要找的东西：

<div id="l-main">
    <div v-for="(variation, key) in variations">

        <label>

          {{ variation.name }}

          <input 
            type="radio"         
            name="Test"
            :value="key"
            :checked="variation.primary"
            @change="onChange"
            />

        </label>
    </div>

    <br>Output:<br>
    <div v-for="(variation, key) in variations">
        {{ variation.name }} {{ variation.primary }}
    </div>

</div>

var vm = new Vue({
    el: '#l-main',
    data: {
        variations: {
            '41783' : {
                'name': 'test1',
                'primary': false
            },
            '41785' : {
                'name': 'test2',
                'primary': true
            }        
        }
    },
    methods: {
        onChange($event) {  
            // the primary variation is the one whose key
            // matches the value of the radio button that got checked
            for (const key in this.variations) {
                this.variations[key].primary = key === $event.target.value;
            }
        }
    }
});