如何在vue渲染函数中声明自定义组件的v-model？

Question

我的代码如下：

<div id="map">
    <script>
      function initMap() {
        var uluru = {lat: -26.209248, lng: 28.254368};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
    </div>

    <footer>
        <p>Join us on social media:</p>

        <a href="https://www.facebook.com/****" target="_blank" class="fa fa-facebook">&nbsp;&nbsp;Facebook</a>
        <a href="https://twitter.com/****" target="_blank" class="fa fa-twitter">&nbsp;&nbsp;Twitter</a>

    </footer>

在for-loop中，我想将... 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"}})] ) } ，form_data.a，form_data.b绑定到每个form_data.c。

但是，当我使用Input或vModel: "form_data[key]"时，两者都无法正常工作。一般来说，写一般的正确方法是：vModel: "form_data.key"？

如何在vModel: "form_data.a"循环中解决这个问题？

编辑：实际案例是IView Form。例如：

for

此示例中的<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，但我无法使用form_data。现在如何绑定"form_data.a"（自定义组件v-model）？

Answer 1

请勿在{{1​​}}声明中使用箭头功能。关于渲染函数的用法，要生成属性，请使用render，而不是attrs。另外，引用Render Functions & JSX docs：

  

渲染功能中有没有直接props对应 - 您必须自己实施逻辑 。

以下演示如何实现。

在渲染函数中为DOM本机元素声明v-model（例如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
    ]);
  }
});

在渲染函数中声明DOM自定义组件<script src="https://unpkg.com/vue"></script> <div id="app"></div>（例如v-model）

在此示例中，声明模拟IView's <Form>, <FormItem> and <Input>的使用，这是vue自定义组件。在下面的代码中，我为组件的名称添加了<Inputx>，以便读者一眼就不会将它们与原生的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);
    }
});

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