Twitter bootstrap vue.js的垂直选项卡引导输出错误

我对这个剧本很感兴趣

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

{{key}}{{data}}

这一结果： 请看图片

问题是当我点击AN000044时。我得到了与单击时相同的结果

---

关于BN00000。。。。。。所有来自BN和目标ist的数据都混合在一起，结果应该显示出来，直到access\u type

为将来的访问者编辑：代码的问题是，您必须迭代左侧“标题”使用的同一对象，也要迭代数据字段（右侧）。现在，您正在从不同的对象创建左侧的标题和右侧的数据（

sitePartLine

用于标题，而

siteObject.line\u 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>

#
{{key}}{{field}}

导出默认值{
名称：“测试”，
数据（）{
返回{
数据：[]
};
},
安装的（）{
//您必须在某个地方填充数据对象
此参数。数据=[
{lineid:“AN000..”，site_id:“123”}，
{lineid:“BN000..”，site_id:“456”}
];
}
};

您的变量名非常混乱，这无助于任何人理解您在做什么。代码的问题是，您必须迭代用于左侧“header”的同一对象，也用于迭代数据字段（右侧）。现在，您正在从不同的对象创建左侧的标题和右侧的数据（

sitePartLine

用于标题，而

sitepobject.line\u info

用于数据）。@BennettDams好的，我更改了标题：现在我有了EVRY，在哪里相同，我仍然有相同的结果？我知道吗？这不是我的意思。您应该在Vue的

data

函数中创建一个对象（例如，称为“数据”或在您的情况下，我猜是“行”），该对象包含所有要显示的对象。然后您有一个

v-for

来迭代这些对象（所以所有数据对象都是这样）。在这个

v-for

中，您创建了带有标题的选项卡，并创建了数据字段，您可以在其中使用标题中的项目作为数据字段的v-for。@bennett Dams，您能告诉我我我是如何使用这个选项的新手吗？如果可以，谢谢