如何在 vuejs 中查看 daynamique 数组中的值

Question

ArrayOrdered :[ { name :"PRODECT 1", price :"20", amount:"10", Total 1 :" ", discount : "" , Total 2 :" " }, { name :"PRODECT 2", price ：“50”，金额：“20”，总计 1 ：“”，折扣：“”，总计 2 ：“”}，{名称：“PRODECT 3”，价格：“15.5”，金额：“10”，总计1 ：“”，折扣：“”，总计 2 ：“”}，......]

我想在每次推入数组后查看 Total 1 (price *amout) 和 Total2 (Total1*discount) 的值并获得所有总价

Answer 1

您可以使用计算属性返回列表的新版本，其中添加了所需的项目，而不是查看和修改您的数据。 一般来说，这往往不太容易出错并且更容易理解。 这是一个工作示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in itemsWithTotals" :key="index">
        <span>{{ item.total1 }} - {{ item.total2 }}</span>
      </li>
    </ul>
  </div>
</template>

const ITEMS = [
  { name: 'item1', price: 20, amount: 10, discount: 0 },
  { name: 'item2', price: 50, amount: 15, discount: 0.25 },
  { name: 'item3', price: 35, amount: 20, discount: 0.75 },
];

export default {
  data() {
    return { items: ITEMS };
  },
  computed: {
    itemsWithTotals() {
      return this.items.map(item => {
        const total1 = item.price * item.amount;
        const total2 = total1 * (1 - item.discount);
        return { ...item, total1, total2 };
      });
    },
  },
};

请注意，我已将您的原始数据转换为具有数字属性，而不是字符串。