使用VueJS的ComboBox模板组件-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

使用VueJS的ComboBox模板组件

P粉550323338 2023-09-03 22:34:50

[Vue.js讨论组]

727

<p>我想使用 <code>vuejs v3</code> 制作一个 <strong>Combobox</strong> 模板组件，为此我有以下代码：</p> <pre class="brush:html;toolbar:false;"><template> <select name={{selector_name}} class= "combobox" id={{selector_id}}> v-for=opt in {{selector_options}} <option value=opt> opt </option> </select> </template> <script> export default { name: 'ComboBox', data() { return { selector_name: null, selector_id: null, selector_options : null, } }, props: { selector_name: { type: String, required: true }, selector_id: { type: String, default: "combobox" }, selector_options: { type: Array, required: true } }, methods: { onChange: (event) => { console.log(event.target.value); }, }, computed: {}, } </script> </pre> <p>但是我使用 <code>v-for</code> 的方式对我来说似乎不正确，你能告诉我如何纠正吗？提前致谢。</p>

P粉550323338

全部回复(1)

P粉6161110382023-09-04 16:19:58 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，但不要在数据内部定义它。

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