<p>私は <code>vuejs v3</code> を使用します
コンボボックスを作成します。型板部品、此我有以下代：</p>
<pre class="brush:html;toolbar:false;"><テンプレート>
<select name={{selector_name}} class= "コンボボックス" id={{selector_id}}>
v-for=オプトイン {{selector_options}}
<オプション値=opt>
選択する
</オプション>
</選択>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
名前: 'コンボボックス',
データ（） {
戻る {
セレクター名: null、
selector_id: null、
selector_options : null、
}
}、
小道具: {
セレクター名: {
タイプ: 文字列、
必須: true
}、
セレクター ID: {
タイプ: 文字列、
デフォルト: 「コンボボックス」
}、
セレクターオプション: {
タイプ: 配列、
必須: true
}
}、
メソッド: {
onChange: (イベント) => {
console.log(event.target.value);
}、
}、
計算: {}、
}
</スクリプト>
</pre>
<p>ただし、私は <code>v-for</code> を使用しています。 </p>この方法は私にとって不当であるように見えますが、私がどのように正しいのかを報告することができます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
あなたの質問に明確に答えるために、要素には v-for が使用されていることがたくさんあります。
リーリープロップとデータを同じ名前で定義することはできません。 Props、プロパティと値をデータに挿入します。 まったく同じですが、データは親から取得され、親から子に値を渡します。
したがって、データを渡す必要がある場合は、props を使用しますが、データ内で定義しないでください。
これらすべての 実例 があります (読みやすさを向上させるために、小道具の代わりにデータを使用しています)。