json 数据无法进入 Vue 路由器

Question

下面是我用来练习API调用的JSON数据。但是当我尝试加载 JSON 数据时，我无法做到。

不知道为什么要用data(){.....

data.json 无法在网页中显示，但在控制台中，data.json 已被读取像这样的 img:

https://i.imgur.com/Hn41K92.png

我的 data.json 是：

{
  "contents": [
    {
      "content": "456",
      "id": 2
    }
  ]
}

//This is my Vue.js

let 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>`,
      data() {
        return {
          input: '',
          contents:[]
        };
      }
    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,
        mounted() {
          axios.get('http://localhost:3000/contents').then((res) => {
            console.log(res.data);
            this.contents = res.data;
          })
        }
      })

<!-- This is my HTML -->

<div id="app">
      <router-view></router-view>
    </div>

Answer 1

这是一个Jsfiddle

首先您需要声明一个 vue 组件....因为您拥有的 let list = {...} 不是组件并且路由器无法识别它，你的 vue 实例数据也不是你的组件数据......你需要将数组作为道具传递......这是你如何做到的：

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>

json 数据无法进入 Vue 路由器

The json data can't into Vue router

vue.js

vue-router

json-server