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。

您的用例不是单选按钮的工作方式。

看看这个例子。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

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

根据您的jsFiddle，我认为这是您要寻找的：

checked

<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>

Answer 4

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

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

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

4 个答案: