如何通过单击 v-list 项目 vue + vuetify select v-radio

Question

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

在 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)
            }
        }
    })

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

注意：单击单选按钮周围 select 是单选按钮，但不是列表项。

Using 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)
      }
    },

我做了 fiddle https://jsfiddle.net/zacuwyw3/2/

如何通过单击 v-list 项目 vue + vuetify select v-radio

How to select v-radio by clicking on v-list item vue + vuetify

javascript

vuejs2

vue-component

vuex

vuetify.js