数组元素显示两次

Question

我有这张带有双列样式的卡片，它应该在左侧显示数组的第一个元素，在右侧显示第二个元素，在第一个下方显示左侧第三个元素，依此类推......像这样：

所以对于上面的例子，数组是这样的： [{"Application": "BP 3ALT"}, {"Status:", "Issued permit"}, {"Address:", "4367"}, ... ]

我在 Vuejs 中编写了这段代码，它接受数组作为道具，但它在网站上显示每个元素两次。就像如果我通过 [{"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
      }
    }