[Vuejs]-Dynamic routing with static JSON in Vuejs

by

2👍

✅

this.lists.id is always undefined. Our this.lists is an array. You should place router inside v-for and access item.id

Should be

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

Updated

As discussion, you can update your 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>

or if you can import 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>
👤ittus

Leave a comment