代码之家 › 专栏 › 技术社区 › calin24

自定义vue 3表单选择不发射正确的模型值

vue.js javascript

calin24 · 技术社区 · 4 年前

我创建了一个选择表单组件:

<template>
    <div class="col">
        <div class="row mb-4">
            <label class="col-sm-4 col-form-label col-form-label-sm">{{ label }}</label>
            <div class="col-sm-8">
                <select
                    class="form-select form-select-sm"
                    :class="{'is-invalid': error}"
                    :disabled="disabled"
                    :value="modelValue"
                    @change="updateSelect"
                >
                    <option
                        v-for="(option, index) in options"
                        :value="option.id ? option.id : (option.value ? option.value : option)"
                        :key="option.id ? option.id : index"
                    >
                        {{ option.name ? option.name : option }}
                    </option>
                </select>
                <div class="invalid-feedback" v-if="error"> {{ error }}</div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "SelectForm",
    props: {
        label: {
            type: String,
            default: "",
        },
        modelValue: {
            type: [String, Number, Boolean],
            default: "",
        },
        error: {
            type: String,
            default: ""
        },
        disabled: {
            type: Boolean,
            default: false
        },
        options: {
            type: Object
        }
    },
    setup(props, { emit }) {
        const updateSelect = (event) => {
            emit("update:modelValue", event.target.value)
        }

        return {
            updateSelect
        }
    }
}
</script>

<style scoped>

</style>

选项可以是:

['Test 1', 'Test 2']
[{id: 1, name: 'Test 1'}]
[{value: 'test1', name: 'Test 1'}]

所以在主要部分我有:

<select-form label="Status" :options="userStatuses" v-model="isActive"/>

其中userStatuses对象是:

const userStatuses = ref([
   {name: 'Active', value: true},
   {name: 'Inactive', value: false}
])

问题是,当选择一个值“Active”时,它会将isActive模型设置为“true”(作为字符串-我需要它是布尔值),而对于Inactive=>对象(这是Vue开发工具中所说的)

我想问题是当返回模型值时

emit("update:modelValue", event.target.value)

我不确定我是否做对了。

有人知道怎么解决这个问题吗?

0 回复 | 直到 4 年前

calin24 4 年前

我在updateSelect函数中做了一些更改,如果它是布尔值或数字,我会强制转换它的值。。。并在更新时设置该值:

const updateSelect = (event) => {
   let value = event.target.value;
   if(value === 'true') { value = true }
   if(value === 'false') { value = false }
   if(!isNaN(parseInt(value))) { value = parseInt(value) }
   emit("update:modelValue", value)
}

timewastingprofessional 4 年前

这一行似乎导致“非活动”返回对象,“活动”返回字符串:

:value="option.id ? option.id : (option.value ? option.value : option)"

自从 {name: 'Inactive', value: false} 没有一个 id 而且有一个假发 value 它会将整个选项对象设置为选项的值。

您可以将其改写为:

:value="typeof(option) === 'string' ? option : option.id || option.value"

所以在这个用例中,你总是会得到“真”或“假”。然而,我相信 event.target.value for select将以任何方式返回字符串,因此您还需要更改:

emit("update:modelValue", event.target.value)

到

emit("update:modelValue", event.target.value === "true")