如何使用 Vue.js(和 V 模型)在不知道值的情况下选择第一个单选按钮

Question

在我的用例中，单选按钮最初由服务器动态呈现。然后在客户端，我想使用 v-model 来处理值更改和相关逻辑。问题是我想预先选择第一个按钮，但在客户端我不知道它的价值。在 vue.js 中执行此操作的推荐方法是什么？如有必要，服务器可以为它生成一些"提示"。

我一直在寻找一段时间，但我看到的每个工作解决方案都假设数据已经存在。我能想到的一种方法是制作一个 api 来返回按钮的值，但这感觉有点矫枉过正。

JSFiddle

Answer 1

您可以将组件mounted挂钩中的 r 初始值设置为第一个单选按钮的值：

mounted() {
  this.r = this.$el.querySelector('input[type="radio"]').value;
}

但是，最好为首先不是由服务器呈现的组件使用固定模板。您可以呈现包含所需项数据的 JavaScript，然后将该数据绑定到模板，而不是呈现 HTML。

当模板从数据生成而不是相反时，Vue 效果最好。

<script>
  // Rendered by the server external to the Vue component,
  // otherwise just render directly into the component's data
  window.items = [
    { label: 'Apple', value: 'apple' },
    { label: 'Orange', value: 'orange' },
  ];
</script>

<label>
  <input v-model="selected" v-for="item of items" type="radio" :value="item.value">
  {{ item.label }}
</label>

new Vue({
  el: "#app",
  data: {
    items: window.items,
    selected: window.items[0].value,
  },
});