vue.js 如果属性为空,请选择带有“”的选项

7ajki6be  于 2023-02-24  发布在  Vue.js
关注(0)|答案(2)|浏览(129)

我正在使用Vue.js 3和脚本设置。
这是在我的模板:

<select v-model="selectedStatus">
    <option 
v-for="option in statusOptions" 
:value="option.status" 
:selected="status == option.status || (status === null && option.status === '')">
{{ option.label }}
</option>
</select>

在脚本设置中,我有以下定义:

const props = defineProps(['status']);
const selectedStatus = ref(props.status);
const statusOptions = [
    { status: '', label: 'Any' },
    { status: 'error', label: 'Only Error' },
    { status: 'success', label: 'Only Success' }
];

我可以使用VueDevtools确认prop status为空,当我在:selected=..上添加一个console.log时,我可以看到它在第一次迭代中实际返回true。
但是,选择框没有预先选择“任何”。我错过了什么?
这是它在检查器中的样子:

q9rjltbz

q9rjltbz1#

这是因为如果<select>元素上有一个v-model,那么:selected属性是无用的,因为它具有“初始选定值”的优先级。
因为status等于nulloption.status等于'',所以vue不认为它们相等,因此不预先选择“任何”。
因此,这里唯一的解决方案是确保selectedOption转换为'',如果它是null

const selectedOption = ref(props.status || '')
xlpyo6sf

xlpyo6sf2#

尝试将"任意"的状态值设置为空:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const stat = ref(null)
    return { stat }
  },
})
app.component('child', {
  template: `
    <select v-model="selectedStatus">
      <option 
      v-for="option in statusOptions" 
      :value="option.status" 
      :selected="status === option.status || (status === null && option.status === '')">
      {{ option.label }}
      </option>
    </select>
  `,
  props: ['status'],
  setup(props) {
    const selectedStatus = ref(props.status);
    const statusOptions = [
        { status: null, label: 'Any' },
        { status: 'error', label: 'Only Error' },
        { status: 'success', label: 'Only Success' }
    ];
    return { selectedStatus, statusOptions }
  }
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <child :status="stat"></child>
</div>

相关问题