当vue.js + vuetify单选按钮的值相同时，它们不起作用

Question

如何使单选按钮1可选，即使它与另一个单选按钮具有相同的值？

示例:用户选择该值包含某物特征的价格的特征。如果我选择了1和值20，则不应该选择该字符。2值20

<script>
        new Vue({
          el: '#app',
          data () {

          }
        })
</script>


<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout row wrap>
        <v-flex xs12 md6>
          <v-subheader>Light</v-subheader>
          <v-card flat>
            <v-card-text>
              <p>{{ ex8 || 'null' }}</p>
              <v-radio-group v-model="ex8" :mandatory="false">
                <v-radio label="Radio 1" value="radio-1"></v-radio>
                <v-radio label="Radio 2" value="radio-1"></v-radio>
              </v-radio-group>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 md6>
          <v-subheader>Dark</v-subheader>
          <v-card color="secondary" flat>
            <v-card-text>
              <p class="white--text">{{ ex9 || 'null' }}</p>
              <v-radio-group v-model="ex9" :mandatory="false">
                <v-radio label="Radio 3" value="radio-3" dark></v-radio>
                <v-radio label="Radio 4" value="radio-4" dark></v-radio>
              </v-radio-group>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

附注：

codepen.io/Pavel8289/pen/dJwzyV -为什么循环不起作用？问题的答案：“我来自英国...”>“环游美国”>任何answer>，最后所有项目都被选中-

Answer 1

VueJs确实将渲染优化为尽可能小。向您的单选框添加:key：

<v-radio label="Radio 1" value="radio-1" :key="1"></v-radio>
<v-radio label="Radio 2" value="radio-1" :key="2"></v-radio>

Answer 2

“单选类型的元素通常用于单选按钮组-描述一组相关选项的单选按钮集合。在给定组中只能同时选择一个单选按钮。”

为组中的每个无线电分配相同的名称：

<v-radio label="Radio 1" value="radio-1" name="price-1"></v-radio>
<v-radio label="Radio 2" value="radio-1" name="price-1"></v-radio>