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

Posted 2023-02-23

【中文标题】如何通过单击 v-list 项 vue + vuetify 来选择 v-radio

【英文标题】：How to select v-radio by clicking on v-list item vue + vuetify

【发布时间】：2018-09-23 04:58:30

【问题描述】：

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

在 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

【参考方案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>

【讨论】：

我确实尝试过我的设置，但它没有给出想要的结果？

【参考方案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/

【讨论】：

谢谢！效果符合预期！

所以你使用vuetify@0.14.8和vue@2.4.2，奇怪的是你的代码适用于这些，但不适用于我的版本vue@2.5.9, vuetify@ 0.17.1

我确实四处寻找，问题在于 vuetify@0.17.1 - 收音机必须是直接子代。它在以后的版本中得到了修复。比较（github.com/vuetifyjs/vuetify/blob/v0.17.1/src/components/… 与）（github.com/vuetifyjs/vuetify/blob/v1.0.14/src/components/…）。我对应该放置 v-model 的位置进行了一些编辑，但除此之外，我会将您的答案标记为正确。

@vuetify 0.17.7 的解决方案：jsfiddle.net/50wL7mdz/300244 和您的@vuetify0.14.8 的解决方案：jsfiddle.net/50wL7mdz/300244