如何在 vue 渲染函數中為自定義組件聲明 v-model？

Question

我有以下代碼：

...
var label_key_map = { a: "1", b: "2", c: "3", d: "4" }
render: (h) => {
  var form_data = {}
  for (let key in label_key_map) {
    var form_item = h(
      'FormItem',
      {props: {prop: key}},
      [h('Input', {props: {type: "text", vModel: "form_data.key"}})]
    )
  }

在 for 循環中，我想將form_data.a 、 form_data.b 、 form_data.c到每個Input 。

但是當我使用vModel: "form_data[key]"或vModel: "form_data.key"時，兩者都不起作用。 一般來說，正確的寫法似乎是： vModel: "form_data.a" ？

如何在for循環中解決這個問題？

---

編輯：實際情況是IView Form 。 例子：

<Form :model="formValidate">
    <FormItem label="E-mail" prop="mail">
        <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
    </FormItem>
</Form>

在這個例子中我的form_data是formValidate 。 我使用for -loop 生成form_data ，但我不能使用"form_data.a" 。 現在如何綁定（自定義組件Input的） v-model ？

Answer 1

不要在render聲明中使用箭頭函數。 關於渲染函數的使用，生成屬性，使用attrs ，而不是props 。 另外，引用Render Functions & JSX 文檔：

渲染函數中沒有直接v-model對應物- 您必須自己實現邏輯。

下面是如何實現的演示。

在渲染函數中聲明 DOM 原生元素的v-model （例如<input> ）

 new Vue({ el: '#app', data: { form_data: { a: "1", b: "2", c: "3", d: "4" } }, render(h) { // dont use arrow function var self = this var form_items = []; for (let key in self.form_data) { var form_item = h('div', {}, [ key + ':', h('input', { attrs: {type: "text"}, // simulate "v-model" domProps: {value: self.form_data[key]}, on: {input: function (event) { self.form_data[key] = event.target.value }} }) ] ); form_items.push(form_item); } var form = h('form', {}, form_items); return h('div', {}, [ form, h('pre', JSON.stringify(this.form_data)) // added for visual debug ]); } });

 <script src="https://unpkg.com/vue"></script> <div id="app"></div>

在渲染函數中聲明 DOM 自定義組件的v-model （例如<Inputx> ）

在這個例子中，聲明模擬了IView 的<Form> 、 <FormItem>和<Input>的使用，它們是 vue 自定義組件。 在下面的代碼中，我在組件的名稱中添加了一個x ，這樣讀者一眼就不會將它們與原生的<form>或<input>混淆（起初實際上發生在我身上的事情）。

 // declaring some custom components to simulate https://www.iviewui.com/components/form Vue.component('Formx', {template: '<div>Form\'s model: {{ model }} <hr><slot></slot></div>', props:['model']}) Vue.component('FormItemx', {template: '<div><slot></slot></div>'}) Vue.component('Inputx', {template: '<div><input :value="value" @input="$emit(\'input\', $event.target.value)"></div>', props:['value']}) new Vue({ el: '#app', data: { form_data: { a: "1", b: "2", c: "3", d: "4" } }, render(h) { // don't use arrow function here var self = this var form_items = []; for (let key in self.form_data) { var form_item = h('FormItemx', { attrs: {prop: key}}, [h('Inputx', { attrs: {type: "text"}, // custom component "v-model" model:{ value: self.form_data[key], callback: (v) => self.$set(self.form_data, key, v), expression:"form_data["+key+"]" } })] ); form_items.push(form_item); } return h('Formx', {attrs:{"model":this.form_data}}, form_items); } });

 <script src="https://unpkg.com/vue"></script> <div id="app"></div>

Answer 2

h('custom-component',{
    model:{
        value: self.form_data[key],
        callback: (v) => self.$set(self.form_data, key, v),
        expression:"form_data["+key+"]"
    }
});

這種方式可以使v-model工作，但不是推薦的使用方式。

我的建議仍然是對自定義組件使用value dom 屬性和input事件，如下所示：

h('custom-component',{
    attrs:{
        value: this.myValue
    },
    on:{
        input: val => this.myValue = val
    }
})

對於原生元素：

h('input',{
    attrs:{
        type:'text'
    },
    domProps:{
        value: this.myValue
    },
    on:{
        input: val => this.myValue = val
    }
})

代碼中的更多細節： github.com/TerryZ/vue-plugins