如何在 vuejs 的空值选择组件中设置默认选项？

Question

有一个 select with v-model。最初，有空。在选项中，我还为默认值指定 null - 一切正常，默认值被替换。 但是一旦我将这个选择放入一个单独的组件中，由于某种原因它停止使用 null，默认选项不会被替换。 文档链接： https://vuejs.org/guide/components/v-model.html

父组件中的调用：

Parent.vue

<filter-trashed-select v-model="filters.trashed.fieldValue"/>

FilterTrashedSelect.vue

<template>
    <div class="reference__filter-select-wrapper">
        <select class="form-select" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
            <option :value="null">{{ $t('Only active') }}</option>
            <option value="only">{{ $t('Only hidden') }}</option>
            <option value="with">{{ $t('All') }}</option>
        </select>
    </div>
</template>

<script>
export default {
    name: "FilterTrashedSelect",
    props: ['modelValue'],
    emits: ['update:modelValue']
}
</script>

1. 我尝试显式替换空值

<template>
    <div class="reference__filter-select-wrapper">
        <select class="form-select" :value="null" @input="$emit('update:modelValue', $event.target.value)">
            <option :value="null">{{ $t('Only active') }}</option>
            <option value="only">{{ $t('Only hidden') }}</option>
            <option value="with">{{ $t('All') }}</option>
        </select>
    </div>
</template>

<script>
export default {
    name: "FilterTrashedSelect",
    props: ['modelValue'],
    emits: ['update:modelValue']
}
</script>

2. 我在调用时尝试使用扩展版的v-model

Parent.vue

<filter-trashed-select :modelValue="filters.trashed.fieldValue"
  @update:modelValue="newValue => filters.trashed.fieldValue= newValue"/>

3. 但是如果你从组件中取出这个选择，并在 Parent.vue 中显式使用它，那么一切正常

简化了 Vue SFC Playground 上的问题示例。

Answer 1

我建议您选择其他值作为默认值

null

。 Null 不是一个值，不应被视为值。 Null 是没有价值。

如果您在选择选项中使用 null 作为值，则 Vue 使用选项的文本作为值。检查下面的操场，如果您选择第一个选项，

showValue()

将如何打印“仅活动”。

有趣的是，

:value="modelValue"

和

v-model="modelValue"

的行为不同。检查两个选择对选择第一个选项的反应。在这一点上，我对此没有任何解释。

最好的解决方案是为您的道具使用一些

default

值并验证它以设置默认值。

<option value="active">Only active</option>

和

props: {
  modelValue: {
    type: String,
    default: 'active',
    validator: function (value) {
        return ['active', 'only', 'with'].includes(value)
    }
  }
}

null

仍然很难通过，因为它甚至不会导致验证发生。在这里我也不知道为什么会这样。 最好使用

undefined

而不是

null

，因为

undefined

会导致验证发生。

查看以下Vue SFC Playground了解详情

const { createApp, ref } = Vue;

const App = {
 setup() { 
  const modelValue = ref(null)
  const showValue = (value) => {
    console.log(value)
    modelValue.value = value
  }
  return  { 
    modelValue, 
    showValue 
   } 
 }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
  modelValue: {{modelValue}}<br/>
  modelValue == null: {{modelValue == null}}<br/>
  <hr/>
  Select bound with <b>v-model</b> <select class="form-select" v-model="modelValue" @input="showValue($event.target.value)">
      <option :value="null">Only active</option>
      <option value="only">Only hidden</option>
      <option value="with">All</option>
  </select><br/>
 Select bound with <b>:value</b> <select class="form-select" :value="modelValue" @input="showValue($event.target.value)">
      <option :value="null">Only active</option>
      <option value="only">Only hidden</option>
      <option value="with">All</option>
  </select>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>