在VueJS中，如何根据我的JS中填充的内容在视图中使用load？

Question

I am new to Vue.JS and require a little help as I am stuck with some logic. I have been given a project to building and as I am under NDA I can only show comparative code examples.

In one View (Bars), which is brought into the viewport of the application using the router, I have a simple for loop.

<ul class="bar-listings">
  <li v-for="bar in bars">
      <router-link to="{bar.barPage}">
          <div class="item">
             <div class="item-bd">
                 <h2>{{ bar.barName }}</h2>
             </div>
          </div>
      </router-link>
  </li>
</ul> 

Then in my JS file conatining all my data, I have this (Only one object for now)

export default [
  {
    barName: "The Tropicana Bar",
    barPage: "views/bars/Tropicana",
  }
];

The title displays correctly on Bars so the loop is pulling the data correctly.

However, I will have a .vue file for each bar, which also uses the data from my JS file. See below:

<template>
    <div class="content-wrapper">
        <h1>{{ getBarByIndex({ bars, index }).barName }}</h1>
    </div>
</template>

<script>
import bars from "./../../data/bars";
export default {
  data() {
    return {
      bars: bars
    };
  },
  methods: {
  getBarByIndex({ bars = [], index = 0 }) {
    return bars[index] || {}
  }
}
};
</script>

So what I need to solve is how do I make the <a v-bind:href=""> load the view for this bar?

Answer 1

What I think you can do, is to have a child component inside your component, you can leverage this by using nested routes in your router-view, additionally, you can pass props as an object to your router components, parent or child, whatever you need.

Basically, you will have a main router view, but inside your component, you will have another router-view which renders child components.

See: Nested Routes

See: Passing Props to Route components