Question

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

我一直在寻找一段时间，但我看到的每个工作解决方案都假设数据已存在。我能想到的一种方法是使api返回按钮＆＃39;价值，但这感觉有点过分。

JSFiddle

Answer 1

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

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

如何使用vue.js（和v-model）在不知道值的情况下选择第一个单选按钮

1 个答案: