неправильный вывод из вертикальной загрузки Tab с vue.js

Question

у меня с этим скриптом

 <vue-tabs class="row" direction="vertical" value="Description">
             <div v-for="(siteParts, index) in sitePartLine">
        <v-tab :title="sitePartLine[index].serial_no" v-if="sitePartLine[index]">

          <div class="description text-left">
                <div v-for="(item, index) in siteObject.line_info" :key="index">
                  <small v-for="(data, key) in item" :key="key">
                      <strong>{{ key }}</strong> {{ data }}<br>
                  </small>
                </div>
            </div>
        </v-tab>
      </div>
    </vue-tabs>

этот результат: пожалуйста, смотрите изображение

проблема в том, когда я нажимаю на AN000044. У меня такой же результат, как когда я нажимаю на BN00000 ...... все смешанные из BN и AN, целевой результат должен показывать его до access_type

Answer 1

РЕДАКТИРОВАТЬ для будущих посетителей: проблема с вашим кодом заключается в том, что вам нужно итерировать тот же объект, который вы используете для «заголовка» слева и для итерации полей данных (справа). Прямо сейчас вы создаете заголовки слева и данные справа из разных объектов (sitePartLine для заголовков и siteObject.line_info для данных).

После комментариев, вот более чистая версия для создания вкладок:

<template>
    <vue-tabs class="row" direction="vertical" value="Description">
        <div v-for="(item, index) in data" :key="index">
            <v-tab :title="item.serial_no">
                <div class="description text-left">
                    <!-- the following "item" is from the first v-for -->#
                    <!-- so it's the same object, therefore we don't have duplicates -->
                    <small v-for="(field, key) in item" :key="key">
                        <strong>{{ key }}</strong> {{ field }}<br>
                    </small>
                </div>
            </v-tab>
        </div>
    </vue-tabs>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      data: []
    };
  },
  mounted() {
    // you have to fill your data object somewhere
    this.data = [
      { lineid: "AN000..", site_id: "123" },
      { lineid: "BN000..", site_id: "456" }
    ];
  }
};
</script>