Динамическая маршрутизация со статическим JSON в Vuejs - PullRequest
Новая
       23

Динамическая маршрутизация со статическим JSON в Vuejs

0 голосов
/ 25 мая 2018

У меня есть статический локальный файл JSON, в который входит мой контент.Я использую VueResources и VueRouter.Моя цель - сделать компонент списка для отображения элементов в локальном файле JSON.Затем, если пользователь щелкает элемент, показывая содержимое этого элемента на другой странице.Для этого я использовал $route.params.

Вот мой компонент списка.Я назвал это Objects.vue 

<template>
  <div id="objects">
    <router-link :to="'/' + this.lists.id"><div v-for="(item, index) in lists" class="list">{{ item.title }} {{ item.id }}</div></router-link>
  </div>
</template>

<script>
//import json from './../assets/data.json'
export default {
  name: 'Objects',
  data() {
    return {
      lists: [],
    };
  },
  methods: {
    getObjects() {
       this.$http.get('/static/data.json')
          .then((response) => {
            console.log(response.body);
            this.lists = response.body.objects;
          })
    }
  },
  mounted() {
    this.getObjects();
    console.log(this.lists.id);
  }
};
</script>

<style scoped>

</style>

И вот это мой компонент элемента.Я назвал это Object.vue 

<template>
  <div id="object">
    <div>
      {{ object.id }}
    </div>
    <div>
      {{ object.title }}
    </div>
  </div>
</template>

<script>
import json from './../assets/data.json'
export default {
  name: 'Object',
  data() {
    return {
      id: this.$route.params.id,
      object: {},
    };
  },
  methods: {
    getObjects() {
       this.$http.get('/static/data.json/' + this.id)
          .then((response) => {
            console.log(response);
            this.object = response.body.objects;
          })
    }
  },
  mounted() {
    this.getObjects();
  }
};
</script>

И в основном мой файл JSON 

{
  "objects": [
    {
      "id": 0,
      "title": "a"
    },
    {
      "id": 1,
      "title": "b"
    },
    {
      "id": 2,
      "title": "c"
    },
    {
      "id": 3,
      "title": "d"
    },
    {
      "id": 4,
      "title": "e"
    },
    {
      "id": 5,
      "title": "f"
    },
    {
      "id": 6,
      "title": "g"
    },
    {
      "id": 7,
      "title": "h"
    },
    {
      "id": 8,
      "title": "i"
    },
    {
      "id": 9,
      "title": "j"
    }
  ]
}

файл route / index.js 

import Vue from 'vue';
import Router from 'vue-router';
import Visit from '@/components/Visit';
import Objects from '@/components/Objects';
import Community from '@/components/Community';
import Instagram from '@/components/Instagram';
import Object from '@/components/Object';

Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Objects',
      component: Objects,
    },
    {
      path: '/Visit',
      name: 'Visit',
      component: Visit,
    },
    {
      path: '/Community',
      name: 'Community',
      component: Community,
    },
    {
      path: '/Instagram',
      name: 'Instagram',
      component: Instagram,
    },
    {
      path: '/:id',
      name: 'Object',
      component: Object,
    },
  ],
});

Компонент списка работает нормально и показывает каждый элемент.Но проблема в том, что когда я щелкнул по элементу, id возвращается undefined.По этой причине попробуйте показать http://localhost:8080/undefined

Как я могу справиться с этим?Чего мне не хватает?

1 Ответ

0 голосов
/ 25 мая 2018

this.lists.id всегда не определено.Наш this.lists является массивом.Вы должны разместить маршрутизатор внутри v-for и получить доступ к item.id

Должно быть 

<div v-for="(item, index) in lists" class="list" :key="item.id">
  <router-link :to="'/' + item.id">
   {{ item.title }} {{ item.id }}
  </router-link>
</div>

Обновлено

В качестве обсуждения вы можете обновить свой Object.vue 

<template>
  <div id="object">
    <div>
      {{ object.id }}
    </div>
    <div>
      {{ object.title }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Object',
  data() {
    return {
      id: this.$route.params.id,
      object: {},
    };
  },
  methods: {
    getObjects() {
       this.$http.get('/static/data.json')
          .then((response) => {
            console.log(response);
            this.object = response.body.objects.find(item => item.id == this.id)
          })
    }
  },
  mounted() {
    this.getObjects();
  }
};
</script>

или, если вы можете импортировать data.json 

<template>
  <div id="object">
    <div>
      {{ object.id }}
    </div>
    <div>
      {{ object.title }}
    </div>
  </div>
</template>

<script>
import json from './../assets/data.json'
export default {
  name: 'Object',
  data() {
    return {
      id: this.$route.params.id,
      object: {},
    };
  },
  mounted() {
    this.object = json.objects.find(item => item.id == this.$route.params.id)
  }
};
</script>
...