Question

我在使用VueJs中的select获取默认选定值时遇到问题。我试过两个例子：

将select中的id和v-model字段传递给：

<select v-model="sort_brand" id="sort-brand" class="form-control">
  <option value="all" selected="selected">All(Brands)</option>
  <option v-for="brand in brands" :value="brand.id">{{ brand.name }}</option>
</select>

在这种情况下，所选的默认值为空。

传递没有ID的sort_brand来选择：

<select id="brand-id" class="form-control">
  <option value="all" selected="selected">All(Brands)</option>
  <option v-for="brand in brands" :value="brand.id">
    {{ brand.name }}
  </option>
</select>

填充默认选定值但是我没有VueJs的表单绑定。任何人请协助解决这个问题：

Answer 1

Vue.js将根据select和选项值的v模型操纵所选属性。因此，尝试设置所选属性将不起作用。

为你的＆＃34;所有＆＃34;选项，您可以像这样分配null值：

<option :value="null">All(Brands)</option>

然后将sort_brand变量设置为null。然后vue.js将null sort_brand与具有null值的选项匹配。

注意：我在这里使用null，因为这是我通常使用的方式，但我可以使用任何其他值。你可以使用＆＃39; all＆＃39;字符串也。

Answer 2

将sort_brand更新为created挂钩中的所有人，这将设置该选项将重视＆＃39;所有＆＃39;默认情况下：

created (){
 this.sort_brand = 'all';
}

您也可以在数据本身中初始化模型。

data (){
 return {
  sort_brand : 'all'
 }
}

Answer 3

如果您的选择值很简单（空，“全部”等），则上述答案（例如@Lunfel）有效。如果您的组合绑定到复杂的JSON对象，那么设置绑定变量并使其自动选择非常困难。

我发现，基于显示的文本，使用JQuery在安装的function（）中找到所需的选项要容易得多，然后设置“ selected”属性。如何执行此操作取决于您的JQuery版本。在最新版本中（不确定何时更改，我正在运行1.10.2），您可以使用类似以下内容的

PIL

较旧的JQuery版本没有prop（）函数，但是有一个更好的find（）函数选择器。试试：

$("#sort-brand option").filter(function () {
    return $(this).prop("label") == 'All';
}).prop("selected", true);

有关使用jQuery选择下拉选项的更多讨论，请参见How to select an option by its text?。

在选择下拉列表中设置默认选择值Vue.Js

3 个答案: