Question

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

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

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

QShortcut *shortcut = new QShortcut(QKeySequence(Qt::Key_Space), this);
connect(shortcut, &QShortcut::activated, [](){ qDebug() << "Space pressed"; });

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

注意：点击单选按钮选择收音机，但不选择列表项。

使用vue@2.5.9,vuetify @ 0.17.1

Answer 1

您可以使用onclick设置所选。

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

并使用watch存储项目，用于点击te单选按钮或列表项，调用存储功能，如下所示：

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

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

Answer 2

对不起，我不知道vuetify。但解决方案将类似。

下面是一个纯Vue示例来实现您的需求。我认为它可以很容易地移植到vuetify。

这很简单，只需: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>

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

2 个答案: