使用VueJS的ComboBox模板组件

Question

<p>我想使用<code>vuejs v3</code> 制作一个组合框 组件模板，因此我有以下代码：</p>

<模板>
    <选择名称={{selector_name}} 类=“组合框” id={{selector_id}}>
        v-for=在 {{selector_options}} 中选择 
        <选项值=opt>
            选择
        </选项>
    </选择>
</模板>

<脚本>
导出默认值{
    名称：'组合框'，
    数据（） {
        返回 {
            选择器名称：空，
            选择器_id：空，
            选择器选项：空，
        }
    },
    道具： {
        选择器名称：{
            类型：字符串，
            必填：真实
        },
        选择器_id：{
            类型：字符串，
            默认值：“组合框”
        },
        选择器选项：{
            类型：数组，
            必填：真实
        }
    },
    方法： {
        onChange: (事件) => {
            console.log(event.target.value);
        },
    },
    计算：{}，
}
</脚本>
</前>
<p>但是我使用<code>v-for</code> 的方式对我来说似乎不正确，你能告诉我如何修正吗？提前致谢。</p>

Answer 1

我看到很多东西，为了清楚地回答你的问题，v-for是用在元素上的。

<template>
    // For mor readability i recommend you do bind your property:
    //  - name={{selector_name}} become :name="selector_name"
    <select :name="selector_name" class= "combobox" :id="selector_id">
        <!-- v-for is required with a unique key, you can take the index and use it -->
        <option v-for="(opt, index) in selector_options" :key="`opt ${index}`" value=opt>
           {{ opt }}
        </option>
    </select>
</template>

您不能定义同名的 props 和 data。 Props，在数据中注入属性和值。 完全相同，但数据来自父级，您可以在父级中将值传递给子级。

因此，如果您需要传递数据，请使用 props，但不要在数据内部定义它。

有一个工作示例所有这些（我使用数据而不是道具来提高可读性）。< /p>