Question

我正在使用vuejs，我想在一个包含数量，单价及其总计的表中获取总金额。现在，我想在循环数据库元素并使用v-if获得某些元素之后获得它们的总数。我该怎么做...预先感谢。这是我的代码

<table id="example1" class="table table-bordered table-striped table-hover">
      <thead>
        <th>Decription</th>
        <th>Quantity</th>
        <th>Unit price</th>
        <th>Total</th>
        <th>Create on</th>
      </thead>
      <tbody>
        <tr v-for="item, key in pass" v-if="list.quotation_no === item.quotation_id">
          <td>{{ item.description }}</td>
          <td>{{ item.quantity }}</td>
          <td>{{ item.unit_price }}</td>                  
          <td>{{ item.quantity * item.unit_price }}</td>
          <td>{{ item.created_at }}</td><br>
        </tr>     
      </tbody>
    </table>

我的json响应如下

{
 id : '5df323620a6f9635fc45b58f',
 agentId : "agent-1",
captureTime : "2019-12-13T05:36:25Z",
locId : '513',
orgId : '1',
saleItems : [{

        "code" : "7373631",
        "name" : "Eyeshadw Patina",
        "objectId" : "2f51acb2",
         activities : [
            {
                "price" : '1400',
                "qty" : '1',
                "ts" : "1576215385000"
            },

        ],
    },
],
sessionId : "13086",
stationId : "11",
tenderItems : {
    "106923bc" : {
        activities : [
            {
                "amount" : "4408",
                "ts" : "1576215571000"
            }
        ],
        code: "CA",
       description : "+INR_CURRENCY",
        objectId : "106923bc"
    }
}

}， { id：'5df323620a6f9635fc45b58f'， agentId：“ agent-2”， captureTime：“ 2019-12-13T05：36：25Z”， locId：'513'， orgId：'1'， saleItems：[{

    "code" : "7373631",
    "name" : "Eyeshadw Patina",
    "objectId" : "2f51acb2",
     activities : [
        {
            "price" : '1400',
            "qty" : '1',
            "ts" : "1576215385000"
        },

    ],
}]

}， { id：'5df323620a6f9635fc45b58f'， agentId：“ agent-3”， captureTime：“ 2019-12-13T05：36：25Z”， locId：'513'， orgId：'1'， saleItems：[{

    "code" : "7373631",
    "name" : "Eyeshadw Patina",
    "objectId" : "2f51acb2",
     activities : [
        {
            "price" : '1400',
            "qty" : '1',
            "ts" : "1576215385000"
        },

    ],
}]

}

Answer 1

首先，我不认为v-for="item, key in pass"是有效的语法，而不应该是v-for="(item, key) in pass"吗？
第二，在the Vue document中，您说不应在模板中同时使用v-for和v-if。而是使用计算属性来执行要执行的预过滤器。

<table id="example1" class="table table-bordered table-striped table-hover">
  <thead>
    <th>Decription</th>
    <th>Quantity</th>
    <th>Unit price</th>
    <th>Total</th>
    <th>Create on</th>
  </thead>
  <tbody>
    <tr v-for="(item, i) in filteredPass" :key="i">
      <td>{{ item.description }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.unit_price }}</td>                  
      <td>{{ item.quantity * item.unit_price }}</td>
      <td>{{ item.created_at }}</td><br>
    </tr>     
  </tbody>
</table>

computed: {
  filteredPass() {
    return this.pass.filter(item => this.list.quotation_no === item.quotation_id);
  },
  totalDatabase() {
    // replace this.pass with this.filteredPass if you want to perform on filtered data
    return this.pass.reduce((acc,item) => {
      return acc + item.quantity * item.unit_price;
    },0);
  }
}

请问为什么您在js中使用snake_case？您来自python吗？我们在这里使用camelCase。

vuejs使用vuejs获取表中元素的总和

1 个答案: