数组元素显示两次

Question

我有一张具有双列样式的卡片，应该在左边显示数组的第一个元素，在右边显示第二个，在左边显示第三个，依此类推……

>

因此对于上面的示例，数组类似于： [{"Application": "BP 3ALT"}, {"Status:", "Issued permit"}, {"Address:", "4367"}, ... ]

我已经用Vuejs编写了这段代码，它接受数组作为prop，但是它在网站上两次显示了每个元素。就像我通过[{"Application:", "128 palmstreet"}]一样，您会在第一行看到两次，就像：

即使它应该只在左侧出现一次。这是我的代码：

columnCard.vue：

    <div class="container">
      <div class="row" v-for="objData in data" :key="objData.label">
        <div class="line col-2">{{objData.label}}</div>
        <div class="line col-3 ">{{objData.value}}</div>
        <div class="vl"></div>
        <div class="line col-2 ">{{objData.label}}</div>
        <div class="line col-3 ">{{objData.value}}</div>
      </div>
    </div>

    props: {
      data: {
        type: Array
      }
    }

传递的数组是：[{'label': 'Application:', 'value': '128 palmstreet'}]

更新： 我该如何解决此问题，以使数组中的每个对象仅显示一次，同时保留双列样式？在<div class="vl"></div>弄乱样式后删除两个div，它将删除右列。我们想保留那个。

Answer 1

您已在模板中重复了元素。这样，它们就不会重复

  <div class="container">
      <div class="row" v-for="objData in data" :key="objData.label">
        <div class="line col-2">{{objData.label}}</div>
        <div class="line col-3 ">{{objData.value}}</div>
        <div class="vl"></div>

      </div>
    </div>

    props: {
      data: {
        type: Array
      }
    }