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

我有一个HTML选择，它预先填充了来自服务器的选项。当我使用v-model时，它会在页面加载时选择一个空选项，而不是第一个选项

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

颜色
大小

我在进一步挖掘之后找到了答案：

HTML:

看这把小提琴：

---

在这种情况下，您可以使用

观察者

检查选项列表是否已更改，然后您可以根据第一个选项的值将默认值分配给组。

这可能会失败。如果您从服务器获取的选项尚未加载，则选项长度将为0。除非您通过添加

Color

和``Size`选项初始化了一些静态选项。然后您就知道了第一个选项，即

Color

这些选项是用PHP获取的，并显示为静态选项，而不是用xhr获取的。那应该没问题吧？

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

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

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

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