v-model 無法與 Vue 3 中的 <component> 一起使用?
P粉806834059
P粉806834059 2023-08-29 20:16:20
0
1
429
<p> 為什麼在下面的範例中 v-model 沒有綁定到我的輸入?<code><component></code>有限制嗎?</p>
<腳本設定>
從 'vue' 導入 { ref }

常量配置=參考({
  標題:[
    { 欄位:'id',標籤:'Id',元件:{ 類型:'輸入' } },
    { field: '名稱', label: '名稱', 元件: { type: '輸入' } },
    // 單選按鈕和其他自訂元件的更多配置
  ],
  數據: [
    { id: 1, 名稱: 'foo' },
    { id: 2, 名稱: '酒吧' }
  ]
})
</腳本>

<模板>
  <表>
    <tr>
      
        <b>{{ header.label }}</b>
      </td>
    
    
      
        <組件:is="header.component.type" v-model="item[header.field]"; >>
      </td>
    
  </表>
  {{ 配置資料 }}
</範本></pre></p>            
P粉806834059
P粉806834059

全部回覆(1)
P粉081360775

Vue v-model 對於原生元素來說效果很好。

但它顯然無法與 一起使用

您的程式碼產生

<input modelvalue="foo">

非常快速的解決方法是直接實作的綁定。

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

但是您將需要相應地更新元件,以使用 value 而不是 modelValue

更新

使用 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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!