vuetify：为什么我的单选按钮没有价值？

Question

我不知道为什么，但我的单选按钮没有价值。

我有以下 json（我的 json），我将项目渲染为 v-radio-group 中的 v-radio 按钮，我的单选按钮标签是 item.description，值是 item.id，但我无法通过 v-model="picked" 获取值，为什么会这样？

当我检查页面时，这是我的单选按钮的描述，它没有返回值

<input aria-checked="false" id="input-90" role="radio" type="radio" name="radio-80" value="">

我的json

    CATEGORIES = [{
        'title': 'vegetables:',
        'items': [
            {
                'id': '19',
                'description': 'asparagus',
            }
        ]
    },
{
        'title': 'Fruits:',
        'items': [
            {
                'id':'21',
                'description': 'oranges',
            },
            {
                'id': '22',
                'description': 'Apples',
            },
            {
                'id':'23',
                'description': 'pears',
            },
            {
                'id': '24',
                'description': 'limes',
            },
            {
                'id': '25',
                'description': 'avocados',
            },
        ]
    },]

我的模板

<template>
    <v-container>
      <h3>Select the issue category:</h3>
      <v-form >
        <v-radio-group v-model="radios" :mandatory="false" >
            <v-list dense v-for="category in categories" :key="category">
            <v-list-item-title>{{category.title}}</v-list-item-title>
            <br>
            <v-radio v-for="item in category.items"
             :key="item"
             :label="item.description"
             :value="item.id"
             :name="items"
             v-model="picked"></v-radio>
            </v-list>
        </v-radio-group>
       </v-form>
    </v-container>
</template>

Answer 1

最大的问题是你嵌套了两个v-models。如果您在<v-radio-group> 上设置v-model，您只在<v-radio> 上设置value，而不是v-model，它将在无线电组模型中选择该值。如果你想要多个值，你应该使用复选框（这与 radios 相同，但模型包含所有选中项的数组，而不仅仅是一个）或者多个单选组，如果这是所需的应用程序逻辑。

另一个问题是您没有正确键入。你应该只使用唯一的原语作为你的键，而不是对象。在您的情况下，category.title 和 item.id 可以成为优秀的 key 候选人，前提是它们是独一无二的。

另外，您没有定义items。

最后但并非最不重要的一点是，您似乎在模板中使用了 radios 和 picked 而没有定义它们（至少在您在此处显示的内容中）。

如果您查看控制台，Vue 会通知您上述所有错误。控制台是您的朋友。这是你的例子，工作。但我不确定它是否具有您应用所需的逻辑：

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    radios: [],
    categories: [{
        'title': 'vegetables:',
        'items': [{
          'id': '19',
          'description': 'asparagus',
        }]
      },
      {
        'title': 'Fruits:',
        'items': [{
            'id': '21',
            'description': 'oranges',
          },
          {
            'id': '22',
            'description': 'Apples',
          },
          {
            'id': '23',
            'description': 'pears',
          },
          {
            'id': '24',
            'description': 'limes',
          },
          {
            'id': '25',
            'description': 'avocados',
          },
        ]
      }
    ]
  })
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-container>
    <h3>Select the issue category:</h3>
    <v-form>
      <v-radio-group v-model="radios" :mandatory="false">
        <v-list dense v-for="category in categories" :key="category.title">
          <v-list-item-title>{{category.title}}</v-list-item-title>
          <v-radio v-for="item in category.items"
                   :key="item.id"
                   :label="item.description"
                   :value="item.id"
                   :name="item.description"></v-radio>
        </v-list>
      </v-radio-group>
    </v-form>
  </v-container>
</div>