v-model 无法与 Vue 3 中的 <component> 一起使用?
P粉806834059
P粉806834059 2023-08-29 20:16:20
[Vue.js讨论组]
<p>为什么在下面的示例中 v-model 没有绑定到我的输入? <code><component></code> 有限制吗?</p> <pre class="brush:php;toolbar:false;">&lt;script setup&gt; import { ref } from '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' } ] }) &lt;/script&gt; &lt;template&gt; &lt;table&gt; &lt;tr&gt; &lt;td v-for=&quot;header in config.headers&quot;&gt; &lt;b&gt;{{ header.label }}&lt;/b&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr v-for=&quot;item in config.data&quot;&gt; &lt;td v-for=&quot;header in config.headers&quot;&gt; &lt;component :is=&quot;header.component.type&quot; v-model=&quot;item[header.field]&quot; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; {{ config.data }} &lt;/template&gt;</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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号