v-list 항목 vue + vuetify를 클릭하여 v-radio를 선택하는 방법

v-list 항목 vue + vuetify를 클릭하여 v-radio를 선택하는 방법

문제:목록 항목을 클릭하여 라디오 버튼을 선택하려고 합니다.

vuetify 매뉴얼에서는 정적으로 #9 제목과 부제목이 있는 액션 체크박스를 사용하여 이 작업을 수행합니다.

내 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을 사용하는 경우

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를 몰라.하지만 해결책은 비슷할 것이다.

다음은 고객이 필요로 하는 것을 구현하기 위한 순수 Vue 샘플입니다.쉽게 시력 감퇴로 이식할 수 있을 것 같아요.

간단해, 묶기만 하면 돼:checked의<input type="radio">와 함께"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>

언급URL : https://stackoverflow.com/questions/49806726/how-to-select-v-radio-by-clicking-on-v-list-item-vue-vuetify