[Vuejs]-Wrong output from vertical Tab bootstrap with vue.js

by

0đź‘Ť

âś…

EDIT for future visitors: The problem with your code is that you have to iterate the same object you’re using for the “header” on the left also for the iteration of the data fields (on the right). Right now, you’re creating the headers on the left and the data on the right from different objects (sitePartLine for headers and siteObject.line_info for the data).

After the comments, here’s a cleaner version to create the tabs:

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

Leave a comment