如何通过单击 v-list 项 vue + vuetify 来选择 v-radio

Question

问题： 我正在尝试通过单击列表项来选择单选按钮。

在 vuetify 手册中，这是通过一个复选框静态实现的 #9 Action with title and sub-title

我的 jsfiddle 代码：https://jsfiddle.net/tgpfhn8m/

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
   <template>
      <div>
         <v-list two-line>
            <v-radio-group :mandatory="true" v-model="selectedItem">
               <template v-for="(item, index) in items">
                  <v-list-tile @click="itemType({'name': item.name, 'id':item.id })">
                     <v-list-tile-action>
                        <v-radio :value="item.name" :key="item.id"
                           ></v-radio>
                     </v-list-tile-action>
                     <v-list-tile-content>
                        <v-list-tile-title>{{ item.name }}</v-list-tile-title>
                        <v-list-tile-sub-title>{{ item.description }}</v-list-tile-sub-title>
                     </v-list-tile-content>
                  </v-list-tile>
               </template>
            </v-radio-group>
         </v-list>
      </div>
   </template>
</div>


Vue.use(Vuetify);
    const items = [{
            id: 1,
            name: 'James',
            description: "If you don't succeed, dust yourself off and try again.",
        },
        {
            id: 2,
            name: 'Fatima',
            description: 'Better late than never but never late is better.',
        },
        {
            id: 3,
            name: 'Xin',
            description: 'Beauty in the struggle, ugliness in the success.',
        }
    ]
    var vm = new Vue({
        el: '#app',
        data: {
            items,
            selectedItem: '',
        },
        methods: {
            itemType(payload) {
                //this.$store.commit('item/setIteminStore', payload)
            }
        }
    })

使用收音机动态实现这一目标的最佳方法是什么？

注意：在单选按钮周围单击会选择单选，但不会选择列表项。

使用 vue@2.5.9，vuetify@0.17.1

Answer 1

抱歉，我不知道 vuetify。但解决方案将是相似的。

下面是一个纯 Vue 示例，用于实现您所需要的。我认为它可以很容易地移植到 vuetify 中。

很简单，只需将<input type="radio"> 的:checked 与"team === selectedTeam" 绑定即可。

new Vue({
  el: '#boxes',
  data: {
    checked: null,
    //checkedNames: [],
    teams: [{'text':'team1', 'field':'team1'},{'text':'team2', 'field':'team2'},{'text':'team3', 'field':'team3'}],
    selectedTeam: null
  },
  methods: {
    selectOneTeam: function (team) {
      this.selectedTeam = team
    }
  }
})

<div id='boxes'>
<div>
  <div>
    <p>What you selected:</p>
    <a v-for="(team, index) in teams" :key="index">
    <span>{{team.text}}:</span>
    <input type="radio" name="team" :checked="team === selectedTeam"/>
    </a>
  </div>
  <hr>
  <ul>
    <li v-for="(team, index) in teams" :key="index" style="width: 100px; float:left" @click="selectOneTeam(team)">
      {{team.text}}
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Answer 2

你可以使用onclick来设置选中的。

itemType(payload) {
    this.selectedItem = payload.name
}

并使用 watch 来存储用户单击单选按钮或列表项存储功能的项目，如下所示：

watch: {
        selectedItem (val) {
        console.log(val)
        this.$store.commit('item/setIteminStore', payload)
      }
    },

我已经做了小提琴https://jsfiddle.net/zacuwyw3/2/