Question

我有一个下拉选择，并使用几个css来删除一些默认外观。但不知何故，当我加载页面时，select字段为空，但它应显示默认值。我无法使其发挥作用。

<select v-model="order.billing.address.country" :disabled="form" v-validate="'required'" name="country">
  <option selected disabled>{{$t('country')}}</option>
  <option value="AT">{{$t('AT')}}</option>
  <option value="BE">{{$t('BE')}}</option>
</select

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0px;
}

这可能是什么问题，或HTML部分是错误的？在选择了有效的东西之后，我只对默认值有问题。

Answer 1

当您使用v-model时，DOM中的selected无关紧要。 <select>将选择v-model指向的任何值。

要将<option>设为已选中，请为其指定一个值并为其设置order.billing.address.country。

示例：

// somewhere in the code
order.billing.address.country = -1;

<select v-model="order.billing.address.country" :disabled="form" v-validate="'required'" name="country">
  <option value="-1" disabled>{{$t('country')}}</option>
  <option value="AT">{{$t('AT')}}</option>
  <option value="BE">{{$t('BE')}}</option>
</select

Answer 2

问题...预期的默认值是多少？一个空字符串？第一个选择？

如果为空字符串..您可以更新第一个选项，使其默认值为空。 <option value="" disabled>{{$t('country')}}</option>

如果第一个选项是<option value="AT">{{$t('AT')}}</option> ...删除<option value="-1" disabled>{{$t('country')}}</option>，那我觉得应该可行。如果没有，则必须触发select元素的更改以注册该值。

选择输入的默认值不显示，选择字段为空，Vue

2 个答案: