亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

社群

學(xué)習(xí)

工具庫(kù)

AI工具

休閒

繁體中文

使用VueJS的ComboBox模板元件

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

604

<p>我想用<code>vuejs v3</code>製作一個(gè)組合框組件模板，因此我有以下程式碼：</p>

<模板>
    <選擇名稱={{selector_name}} 類別=“組合框” id={{selector_id}}>
        v-for=在 {{selector_options}} 中選擇
        <選項(xiàng)值=opt>
            選擇
        </選項(xiàng)>
    </選擇>
</範(fàn)本>

<腳本>
導(dǎo)出預(yù)設(shè)值{
    名稱：'組合框'，
    數(shù)據(jù)（） {
        返回 {
            選擇器名稱：空，
            選擇器_id：空，
            選擇器選項(xiàng)：空，
        }
    },
    道具： {
        選擇器名稱：{
            類型：字串，
            必填：真實(shí)
        },
        選擇器 ID：{
            類型：字串，
            預(yù)設(shè)值：“組合框”
        },
        選擇器選項(xiàng)：{
            類型：數(shù)組，
            必填：真實(shí)
        }
    },
    方法： {
        onChange: (事件) => {
            console.log(event.target.value);
        },
    },
    計(jì)算：{}，
}
</腳本>
</前>
<p>但我用<code>v-for</code>的方式對(duì)我來說似乎不正確，你能告訴我如何修正嗎？提前致謝。</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，在資料中註入屬性和值。完全相同，但資料來自父級(jí)，您可以在父級(jí)中將值傳遞給子級(jí)。

因此，如果您需要傳遞數(shù)據(jù)，請(qǐng)使用 props，但不要在數(shù)據(jù)內(nèi)部定義它。

有一個(gè)工作範(fàn)例所有這些（我使用資料而不是道具來提高可讀性）。