Vue JS在要选择的填充选择中设置了第一项

Question

我有一个HTML选择，其中预装有服务器中的选项。当我使用v-model时，它会在页面加载时选择一个空选项，而不是第一个选项。

我发现下面的帖子是一种可能的解决方案，但是，数据是从服务器填充的，所以我不知道第一个选项是什么。

Vue selected first option with v-model

<select id="group" v-model="group">
  <option value="Color">Color</option>
  <option value="Size">Size</option>
</select>

Answer 1

经过更多的挖掘，我找到了答案：

HTML：

<select id="group" ref="groupSelect" v-model="group">
  <option value="Color">Color</option>
  <option value="Size">Size</option>
</select>

JS：

mounted: function() {
  var groupSelect = this.$refs.groupSelect.children;

  if (groupSelect.length) {
    this.group = groupSelect[0].value;
  }
}

Answer 2

请参阅此JS小提琴： https://jsfiddle.net/eywraw8t/147653/

在这种情况下，您可以使用watcher来检查选项列表是否已更改，然后，您可以根据第一个选项的值将默认值分配给组