Question

我有一个看起来像这样的数据集：

[
    {id: 1, name: 'Foo', is_primary: false},
    {id: 2, name: 'Bar', is_primary: true},
    {id: 3, name: 'Baz', is_primary: false},
]

仅其中一项允许包含is_primary = true。我正在列表中显示这些项目，并尝试为用户可以选择的每个项目显示一个单选按钮，以指示这是主要项目。

<tr v-for="item in items">
    <td><input name="primary" type="radio" v-model="item.is_primary"></td>
</tr>

但是，我认为我不了解这应该如何工作，因为它对我不起作用。这可能吗？还是我应该以其他方式处理这种情况？

Answer 1

一组无线电输入应该v-model相同的变量：一个标量，采用与所选无线电相关的值。

要将其来回转换到您的项目列表中，可以使用计算出的可设置表。

new Vue({
  el: '#app',
  data: {
    items: [{
        id: 1,
        name: 'Foo',
        is_primary: false
      },
      {
        id: 2,
        name: 'Bar',
        is_primary: true
      },
      {
        id: 3,
        name: 'Baz',
        is_primary: false
      },
    ]
  },
  computed: {
    primaryItem: {
      get() {
        return this.items.find((i) => i.is_primary);
      },
      set(pi) {
        this.items.forEach((i) => i.is_primary = i === pi);
      }
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div v-for="item in items">
    <input name="primary" type="radio" :value="item" v-model="primaryItem">
  </div>
  <pre>{{JSON.stringify(items, null, 2)}}</pre>
</div>

使用vuejs将模型属性绑定到单选按钮

1 个答案: