v-model ne fonctionne pas avec <component> dans Vue 3 ?

Question

有限制吗？

<configuration du script>
importer { ref } depuis 'vue'

const config = réf({
  en-têtes : [
    { champ : 'id', étiquette : 'Id', composant : { type : 'input' } }, 
    { champ : 'nom', étiquette : 'Nom', composant : { type : 'input' } },
    // plus de configurations pour les boutons radio et autres composants personnalisés
  ],
  données: [
    { identifiant : 1, nom : 'foo' },
    { identifiant : 2, nom : 'bar' }
  ]
})
</script>

<modèle>
  <tableau>
    <tr>
      <td v-for="en-tête dans config.headers">
        <b>{{ header.label }}</b>
      </td>
    ≪/tr>
    <tr v-for="élément dans config.data">
      <td v-for="en-tête dans config.headers">
        <component :is="header.component.type" v-model="item[header.field]" />
      </td>
    ≪/tr>
  </tableau>
  {{ config.data }}
</template>

Answer 1

Vue v-model fonctionne très bien pour les éléments natifs.

Mais ça ne marche évidemment pas avec

Votre génération de code

<input modelvalue="foo">

Une solution très rapide consiste à implémenter directement la liaison 值.

:value="item[header.field]" @input="item[header.field] = $event.target.value"

Mais vous devrez mettre à jour vos composants en conséquence pour utiliser value 而不是 modelValue.

Mise à jour

Identique à l'utilisation de v-model:value 的解决方法仅以一种方式起作用，与 :value.

<component :is="header.component.type" v-model:value="item[header.field]" />

const { createApp, ref } = Vue

const config = ref({
  headers: [
    { field: 'id', label: 'Id', component: { type: 'input' } }, 
    { field: 'name', label: 'Name', component: { type: 'input' }  },
    // more configs for radio buttons and other custom components
  ],
  data: [
    { id: 1, name: 'foo' },
    { id: 2, name: 'bar' }
  ]
})

const App = {
  setup() {
    return { config, test: 1 }  
  }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app">
<table>
    <tr>
      <td v-for="header in config.headers">
        <b>{{ header.label }}</b>
      </td>
    </tr>
    <tr v-for="item in config.data">
      <td v-for="header in config.headers">
        <component :is="header.component.type" :value="item[header.field]" @input="item[header.field] = $event.target.value" />
      </td>
    </tr>
  </table>
  {{ config.data }}
  <hr/>
  v-model test: <input v-model="test" />
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>