Select 输入不能有默认值 (Vue.js)

Question

尝试将默认值设置为带有“selected”的简单 select 输入无效。

我正在 Vue.js 中创建博客，博客 post 可以分配到不同的类别。但是，在编辑 post 时，如果 post 已经在某个类别中，我希望 select 输入具有默认值。伪代码看起来像这样：“if category.id equals post.category.id”.

这是我的输入：

<label>
  <VeeValidateField name="post_category" as="select">
    <option value="" disabled>Set to folder</option>
    <option value="0">none</option>
    <option v-for="category in categories"
      :key="category.id"
      :value="category.id"
      :selected="category.id === post.category.value"
    >
      {{ category.category_name }}
    </option>
  </VeeValidateField>
</label>

虽然可以有多个 select 输入的默认值，但这不是我的用例。

这是一个错误还是我做错了什么？！

谢谢！

Answer 1

我通过使用 v-model 并将数据中的值设置为以下表达式解决了这个问题：

data() {
    return {
      categoryValue: this.$props.login ? this.$props.login.login_category.value : ""
    }
  }

这是标记：

<label>
    <VeeValidateField v-model="categoryValue" name="login_category" as="select">
        <option value="" disabled>Set to folder</option>
        <option value="0">none</option>
        <option v-for="category in categories"
                :key="category.id"
                :value="category.id">
          {{ category.category_name }}
        </option>
    </VeeValidateField>
</label>

因此，当属性 categoryValue 计算时，select 输入要么获得默认值，要么根本 none。

Select 输入不能有默认值 (Vue.js)

Select input cannot have a default value (Vue.js)

javascript

vue.js

frontend

vuejs3

vee-validate