v-model は Vue 3 の <component> で動作しませんか?
P粉806834059
2023-08-29 20:16:20
<p>次の例では、v-model に決定された入力がありませんか? <code><component></code>有限制吗?</p>
<pre class="brush:php;toolbar:false;"><スクリプトのセットアップ>
'vue' から { ref } をインポートします
const config = ref({
ヘッダー: [
{ フィールド: 'id'、ラベル: 'Id'、コンポーネント: { タイプ: 'input' } }、
{ フィールド: '名前'、ラベル: '名前'、コンポーネント: { タイプ: '入力' } }、
// ラジオ ボタンやその他のカスタム コンポーネントの追加の設定
]、
データ: [
{ id: 1、名前: 'foo' }、
{ id: 2、名前: 'バー' }
】
})
</スクリプト>
<テンプレート>
<テーブル>
<tr>
<td v-for="config.headers のヘッダー">
<b>{{ header.label }}</b>
</td>
</tr>
<tr v-for="config.data の項目">
<td v-for="config.headers のヘッダー">
<コンポーネント :is= "header.component.type" v-model="アイテム[ヘッダー.フィールド]" />
</td>
</tr>
</テーブル>
{{ config.data }}
</template></pre></p>
Vue
v-model
ネイティブ要素に最適です。しかし、これは明らかに
では機能しません。コード生成
リーリー非常に簡単な解決策は、
リーリーvalue
バインディングを直接実装することです。ただし、
modelValue
の代わりにvalue
を使用するには、コンポーネントを適宜更新する必要があります。更新
リーリーv-model:value
を使用した回避策は、:value
と同様、一方向にのみ機能します。