[Vuejs]-The json data can't into Vue router

by

0👍

✅

here is a Jsfiddle

first you need to declare a vue component …. because the one you have let list = {...} is not a component and the router doesn’t recognize it ,
also your vue instance data is not your component data … you need to pass the array as a prop …. here is how you do it : 

var list = Vue.component('list',{
      template:
      `<div>
        <p>
          <input type="text" v-model.trim="input">
          <a href="javascript:;" v-on:click="createHandler">Create</a>
        </p>
      <ol>
         <li v-for="(item,index) in contents" :key="item.id">
            {{ item.content }}
        </li>
      </ol>
      </div>`,
      props : ['contents'],
      data() {
        return {
          input: '',
        }
       }
      })

  let router= new VueRouter({
    routes:[
      {
        path:'/',
        name:'list',
        component:list
      },
      {
        path:'/update/:id',
        name:'update',
        component:Edit
      },
      {
        path:'*',
        redirect:'/'
      }
    ]
  })

   new Vue({
    el: "#app",
    router:router,
    data(){
      return {
        contents : []
      }
    },
    mounted() {
      axios.get('http://localhost:3000/contents').then((res) => {
       this.contents = res.data
      })
    }
  })
<div id="app">
      <router-view :contents = "contents"></router-view>
    </div>

Leave a comment