无法在模板中渲染Vue-js

Question

是否可以在模板中使用Vue.js“stuff”？ 我试图这样做，但每次我尝试，没有任何渲染，我在控制台中得到一个毫无价值的消息说

[Vue警告]：呈现匿名组件时出错：

没有任何东西被渲染到屏幕上，也没有任何关于Vue.js出现问题的迹象。 以下是模板的代码：

   const list = {
        template: '<table><tr v-for="item in list"><td><router-link v-on:click.native="doSomething" v-bind:to="\'/item/\' + item.id">{{ item.title }}</router-link></td></tr></table>'
   }

   const viewItem = { 
        template: '<div>Not Implemented</div>'
   }     


   const router = new VueRouter({
        routes: [
          { path: '/item/:id', component: viewItem },
          { path: '/list', component: list }
        ]
    })

    const app = new Vue(
        {
            router: router,
            data: {
                list: [],
                test: "testing"
            },
            methods: { 
                 getList: //method to get data and populate list. This working correctly. 
                 doSomething: //method for fetching details.
            }
        }

即使在模板中执行像{{test}}之类的简单操作也会导致相同类型的问题。 如果我使用一些静态HTML，事情就可以了。 如果您无法在模板中执行此操作，那么如何完成非静态HTML？

Answer 1

您当然可以在模板中使用Vue。

您收到的错误是因为您错误地设置了data属性。 当您尝试在子list组件中访问它们时，您已将list和test设置为父组件。 这会在Vue尝试渲染组件时产生错误，因此根本不会渲染组件。

要解决此问题，只需将list组件更改为以下内容：

const list = {
  data () {
    return {
      list: [],
      test: "Now you should see me :)"
    }
  },
  template: '<table><tr v-for="item in list"><td><router-link v-on:click.native="doSomething" v-bind:to="\'/item/\' + item.id">{{ item.title }}</router-link></td></tr></table>'
}

您还需要将方法移动到使用它们的组件。