javascript - 突出显示 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 时，我都会向 orders 数组中的元素添加一个标志。方法运行。
通过跟踪新添加的属性，我们可以有条件地显示高亮类。