v-model は Vue 3 の <component> で動作しませんか?

Question

次の例では、v-model に決定された入力がありませんか? 有限制吗?

<スクリプトのセットアップ>
'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>

Answer 1

Vue v-model ネイティブ要素に最適です。

しかし、これは明らかに

では機能しません。

コード生成

リーリー

非常に簡単な解決策は、value バインディングを直接実装することです。

リーリー

ただし、modelValue の代わりに value を使用するには、コンポーネントを適宜更新する必要があります。

更新

v-model:value を使用した回避策は、:value と同様、一方向にのみ機能します。

リーリー

リーリー リーリー リーリー