cari

Rumah  >  Soal Jawab  >  teks badan

v-model tidak berfungsi dengan <component> dalam Vue 3?

<p>为什么在下面的示例中 v-model 没有绑定到我的输入? <kod><komponen></kod> 有限制吗?</p> <pre class="brush:php;toolbar:false;"><setup script> import { ref } daripada 'vue' konfigurasi const = ref({ tajuk: [ { medan: 'id', label: 'Id', komponen: { type: 'input' } }, { medan: 'nama', label: 'Nama', komponen: { jenis: 'input' } }, // lebih banyak konfigurasi untuk butang radio dan komponen tersuai lain ], data: [ { id: 1, nama: 'foo' }, { id: 2, nama: 'bar' } ] }) </skrip> <template> <meja> <tr> <td v-for="pengepala dalam config.headers"> <b>{{ header.label }}</b> </td> </tr> <tr v-for="item dalam config.data"> <td v-for="pengepala dalam config.headers"> <komponen :is="header.component.type" v-model="item[header.field]" /> </td> </tr> </table> {{ config.data }} </template></pre></p>
P粉806834059P粉806834059525 hari yang lalu473

membalas semua(1)saya akan balas

  • P粉081360775

    P粉0813607752023-08-30 10:30:14

    Vue v-model berfungsi hebat untuk unsur asli.

    Tetapi ia jelas tidak berkesan dengan

    Penjanaan kod anda

    <input modelvalue="foo">

    Penyelesaian yang sangat cepat adalah dengan melaksanakan pengikatan secara langsung.

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

    Tetapi anda perlu mengemas kini komponen anda dengan sewajarnya untuk menggunakan value 而不是 modelValue.

    Dikemas kini

    Sama seperti menggunakan 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>

    balas
    0
  • Batalbalas