Question

好，所以我是第一次使用渲染功能，这可能是一个奇怪的问题。尝试动态加载步进函数中的步骤，现在我的代码如下：

<div id="app">
  <v-app id="inspire">
  {{steps}}
  </v-app>
</div>
...
new Vue({
  el: '#app',
  data () {
    return {
      e1: 0,
      mySteps: ['Boom', 'Wham', 'Kaboom!', 'superman']
    }
  },
  methods: {
    render(createElement){
      const stepperStep = createElement('v-stepper-step', 'Some step')
      const divideAndConquer = createElement('v-divider')
      return createElement('v-stepper', [
        stepperStep, divideAndConquer
      ])
    }
  },
  computed: {
    steps(){
      if (this.mySteps & this.mySteps.length > 0){
        return this.render(createElement)
      }
    }
  }
})

为什么我的应用程序没有显示任何内容（也没有错误）？

Answer 1

渲染功能不能与template标签一起使用，模板标签将“覆盖”渲染功能。

此外，render函数不能位于method关键字内，而只能位于脚本的第一级。

在您的情况下，您的代码应为：

<div id="app"></div>

new Vue({
    el: '#app',
    // ...
    render(createElement){
      const stepperStep = createElement('v-stepper-step', 'Some step')
      const divideAndConquer = createElement('v-divider')
      return createElement('v-stepper', [
        stepperStep, divideAndConquer
      ])
    }
    // ...
  })

在您的render函数中，您必须返回一些将在应用程序内部渲染的JSX

在上面的代码中，元素v-stepper将被渲染并添加到#app元素

cf：https://vuejs.org/v2/guide/render-function.html

在带有vuetify的计算属性内使用渲染函数

1 个答案: