Cannot render Vue-js in template

Question

Is it possible to use Vue.js "stuff" inside of templates? I am trying to do this, but every time I try, nothing renders and a I get a worthless message in the console that says

[Vue warn]: Error when rendering anonymous component:

Nothing gets rendered to the screen and there is no indication as to what Vue.js is having a problem with. Below is the code for the template:

   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.
            }
        }

Even doing something simple like {{ test }} in the template results in the same type of problem. If I use some static HTML, things work alright. If you can't do this inside of a template, how can you accomplish non-static HTML?

Answer 1

You may of course use Vue inside of templates.

The error you are receiving is because you incorrectly setting the data property. You have set list and test to the parent component, while you are trying to access them in your child list component. This produces an error while Vue tries to render the component, and thus the component is not rendered at all.

To fix just change your list component to the following:

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>'
}

You will also need to move your methods to the component where you are using them.