Vue渲染函数中如何为循环内组件绑定v-model到对象属性？

我刚看了你的代码，问题出在vModel的绑定方式和form_data的响应式处理上，咱们一步步来解决：

1. 先修正vModel的绑定逻辑 #

你之前用"form_data[key]"或者"form_data.key"都是字符串形式，render函数里的vModel需要直接绑定到实际的属性引用，而不是字符串表达式。正确的做法是直接关联form_data[key]，但还要确保这个属性是响应式的，否则数据更新不会触发视图变化。

2. 确保form_data是响应式对象 #

如果是Vue 2，直接用var form_data = {}创建的对象不是响应式的，后续添加属性无法被Vue追踪，得用Vue.observable()把它转为响应式对象；如果是Vue 3，用reactive()即可。

修正后的完整代码（Vue 2版本） #

var label_key_map = { a: "1", b: "2", c: "3", d: "4" }
// 先把form_data转为响应式对象
var form_data = Vue.observable({})

render: (h) => {
  // 收集所有生成的FormItem节点
  const formItems = []
  for (let key in label_key_map) {
    // 初始化属性，Vue2中必须用Vue.set添加响应式属性
    if (!form_data.hasOwnProperty(key)) {
      Vue.set(form_data, key, '')
    }
    var form_item = h(
      'FormItem',
      { props: { prop: key } },
      [
        h('Input', {
          props: { type: "text" },
          // 手动展开vModel的语法糖，绑定动态属性
          model: {
            value: form_data[key],
            callback: (val) => { form_data[key] = val }
          }
        })
      ]
    )
    formItems.push(form_item)
  }
  // 记得返回包裹所有FormItem的父组件（比如Form）
  return h('Form', {}, formItems)
}

为什么之前的写法不生效？ #

• "form_data.key"这种字符串形式，render函数会把它当成字面量，而不是访问对象属性的表达式；
• 即使你用form_data[key]，如果form_data不是响应式的，或者属性没有用Vue.set处理，Vue无法追踪到变化，视图不会更新；
• Vue 2的render函数中，手动写h函数时，vModel的语法糖需要展开成model配置项（包含value和callback），直接写vModel可能不生效。

Vue 3版本的简化写法 #

Vue 3里用reactive创建响应式对象，render函数的h参数支持更简洁的vModel绑定：

import { reactive } from 'vue'

const label_key_map = { a: "1", b: "2", c: "3", d: "4" }
const form_data = reactive({})

render: (h) => {
  const formItems = []
  for (const key in label_key_map) {
    // Vue3中给reactive对象添加属性自动是响应式的，无需额外处理
    form_data[key] = form_data[key] || ''
    const form_item = h(
      'FormItem',
      { props: { prop: key } },
      [
        h('Input', {
          type: "text",
          'v-model': form_data[key]
        })
      ]
    )
    formItems.push(form_item)
  }
  return h('Form', {}, formItems)
}

额外注意点 #

• 你的原代码没有收集生成的form_item并返回，这样render函数不会渲染任何内容，一定要把所有FormItem放到数组里，最后返回父组件包裹它们；
• 如果是在Vue组件内部写render函数，建议把form_data放到组件的data（Vue2）或者setup（Vue3）里，而不是在render函数里定义，这样生命周期更合理。

内容的提问来源于stack exchange，提问作者aircraft