Vue 指令不适用于渲染

Posted 2023-03-07

【中文标题】Vue 指令不适用于渲染

【英文标题】：Vue directive doesn't work on render

【发布时间】：2018-11-20 12:25:15

【问题描述】：

我有如下渲染函数

function renderCheckbox(data, type, row, meta) 
  return `<input type='checkbox' value='test' v-model='somedata' />`


const test = new Vue(
        el: '#just-test',

        data: 
            somedata: []
        

在模板中我有 somedata 来测试它。

该指令似乎在那里不起作用。渲染时没有返回值。 v-model 似乎是一个属性，检查时的 html 看起来是：

<input type="checkbox" value="test" v-model="somedata">

但是，如果我将语句直接写入模板，则 v-model 可以工作。 因此，somedata 在渲染时显示为 [ "test" ]。 对此有何解释和解决方案？

【问题讨论】：

你如何使用你的 renderCheckbox 函数？

该函数作为另一个组件 A 的值传入。组件 A 具有渲染函数，该函数接受 HTML 并呈现它

【参考方案1】：

您的渲染函数应该创建 javascript。例如：

Vue.component('anchored-heading', 
  render: function (createElement) 
    return createElement(
      'h' + this.level,   // tag name
      this.$slots.default // array of children
    )
  
)

请使用类似 html 的语法模板。