無法在模板中渲染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>'
}

您還需要將方法移動到使用它們的組件。