В VueJS, как я могу использовать нагрузку в представлении, основанном на том, что заполнено в моем JS?

Question

Я новичок в Vue.JS и мне нужна небольшая помощь, потому что я застрял в некоторой логике. Мне дали проект на строительство, и поскольку я нахожусь под NDA, я могу только показать сравнительные примеры кода.

В одном View (Bars), который выводится в область просмотра приложения с помощью маршрутизатора, у меня есть простой цикл for.

<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> 

Тогда в моем JS-файле, содержащем все мои данные, у меня есть это (пока только один объект)

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

Заголовок правильно отображается в столбцах, поэтому цикл правильно извлекает данные.

Однако у меня будет файл .vue для каждой полосы, который также использует данные из моего файла JS. Смотрите ниже:

<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>

Так что мне нужно решить, как заставить <a v-bind:href=""> загрузить представление для этой панели?

Answer 1

Я думаю, что вы можете сделать, чтобы иметь дочерний компонент внутри вашего компонента, вы можете использовать это, используя вложенные маршруты в вашем просмотре маршрутизатора, кроме того, вы можете передавать реквизиты как объект вашим компонентам маршрутизатора, родителю илиchild, все, что вам нужно.

По сути, у вас будет основное представление маршрутизатора, но внутри вашего компонента у вас будет другое представление маршрутизатора, которое отображает дочерние компоненты.

См.Вложенные маршруты

См .: Передача реквизита компонентам маршрута