是否可以在模板中使用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?
答案 0 :(得分:0)
您当然可以在模板中使用Vue。
您收到的错误是因为您错误地设置了data
属性。当您尝试在子list
组件中访问它们时,您已将test
和list
设置为父组件。这会在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>'
}
您还需要将方法移动到使用它们的组件。