突出显示 Vue.js 中新插入的行

Question

我正在从 REST API 获取 JSON 数据（订单）并使用 Vue js 在动态 HTML 表中显示。表格中的每一行都有一个“打印”按钮。按钮的目的是打印结构中的行数据，基本上是一张账单。 为此，我想突出显示新添加的行，直到用户单击“打印”按钮。我如何实现这一目标？ 我每分钟都在刷新桌子。 这是我的代码。

<tr v-for="orders, index in orders">
  <th scope="row">{{ index + 1 }}</th>
    <td>{{ orders.id }}</td>
    <td>{{ orders.billing.first_name + " " +orders.billing.last_name }}</td>
    <td>{{ orders.date_created }}</td>
    <td>{{ orders.billing.phone}}</td>
    <td>{{ orders.billing.address_1 + ", " + orders.billing.address_2 + ", " + orders.billing.city + orders.billing.postcode }}</td>
    <td>{{ orders.line_items.name}}</td>
    <td>{{ orders.total}}</td>
    <td><button class="btn btn-primary" (click)="printBill(data)">Print</button></td>
  </tr>
</tbody>
</table>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    orders: []
  },
  mounted: function() {
    axios.get('https://localhost/Site/wp-json/wc/v3/orders?consumer_key=KEY&consumer_secret=KEY1')
      .then(response => {
        this.orders = response.data;
        console.log(response);
       })
       .catch(error => {
         console.log(error);
        });
     },      
  })
</script>

Answer 1

我写了一个小例子，看看：

<template>
  <div id="app">*
    <tr
      v-for="(order, index) in orders"
      :key="index"
      :class="{highlight: orders[index].isPrinted === undefined}"
    >
      <th scope="row">{{ index + 1 }}</th>
      <td>{{ order.name }}</td>
      <td>{{ order.something}}</td>
      <td>
        <button class="btn btn-primary" @click="printBill(index)">Print</button>
      </td>
    </tr>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      orders: []
    };
  },
  methods: {
    printBill(index) {
      //code to print the bill

      //change flag
      this.$set(this.orders[index], "isPrinted", true);
    }
  },
  mounted() {
    //axios request - data sample
    this.orders = [
      {
        name: "first",
        something: "whatever"
      },
      {
        name: "second",
        something: "whatever"
      },
      {
        name: "third",
        something: "whatever"
      },
      {
        name: "fourth",
        something: "whatever"
      },
      {
        name: "fifth",
        something: "whatever"
      }
    ];
  }
};
</script>

<style>
.highlight {
  background-color: blue;
  color: white;
}
th {
  width: 20%;
}
td {
  width: 20%;
}
</style>

你可以运行它here。

---

如您所见，每当printBill 方法运行时，我都会向订单数组中的元素添加一个标志。

通过跟踪新添加的属性，我们可以有条件地显示高亮类。

Answer 2

为每行数据添加一个isPrinted 标志，如果行之前已被标记，请确保保留此标志。此外，每分钟调用一次 API。

  mounted: function() {
    // Call the API the first time
    this.refreshData()
    // Then call the API every minute
    this.setIntervalId = setInterval(this.refreshData, 60000)
  },
  beforeDestroy: function() {
    // Stop refreshing data after the component is destroyed!
    clearInterval(this.setIntervalId)
  }
  methods: {
    // Extract refresh logic into a method
    refreshData () {
      axios.get('https://localhost/Site/wp-json/wc/v3/orders?consumer_key=KEY&consumer_secret=KEY1')
      .then(response => {
        // Note the orders we previously flagged as printed, so we can reapply the flag after refreshing
        const previouslyFlaggedIds = this.orders.filter(x => x.is_printed).map(x => x.id);
        this.orders = response.data.map(x => ({...x, is_printed: previouslyFlaggedIds.find(y => y === x.id) != null}));
       })
       .catch(error => {
         console.log(error);
      });
    }
  }

使用它来设置行的样式

<tr
      v-for="(order, index) in orders"
      :key="order.id"
      :class="{highlight: !order.is_printed}"
    >

在打印行时设置 is_printed。

<td><button class="btn btn-primary" @click="printBill(order)">Print</button></td>

methods: {
    printBill(order) {
      order.is_printed = true
    }
  }