vue.js 如何从循环外部获取 v-for 循环数据

Question

我有一个 table 显示产品名称和数量以及价格和总价。我已经将总成本逻辑写为公式成本 * 数量。我在 table 之外有一个按钮，默认情况下使用 v-if 指令隐藏该按钮如果只有至少一个产品数量大于零，我如何才能激活该按钮。默认情况下，我给的数量是 0，因为它会因用户而异。我在 v-for 循环中有一系列产品，我迭代为 v-for="p in products"，所以数量将为 p.quantity。我怎样才能在循环外使用 p.quantity

## Html table ##
<table class="table table-striped">
          <thead>
            <tr>
              <td>S.No#</td>
              <td>Product</td>
              <td>Cost</td>
              <td>Quantity</td>
              <td>Total</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="p in products">
              <td>1</td>
              <td>{{p.item}}</td>
              <td>{{p.cost}}</td>
              <td><input type="number" class="form-control qty-box" name="" v-model='p.qt'  min="0"></td>
              <td>{{p.cost*p.quantity}}</td>
            </tr>
          </tbody>
        </table>
        <div class="row">
          <div class="col-md-12">
            <center v-if="btn"><button class="btn btn-success">Confirm</button></center>
          </div>
        </div>
## Vue-cli Code ##
<script>
export default {
  name: 'app',
  data () {
    return {
      btn:false,
      counter:8,
      qty:0,
      proTotal:'',
      products:[
          {'item':'timber','cost':250,'id':1, 'quantity ':0},
          {'item':'wood','cost':240,'id':2, 'quantity ':0},
          {'item':'primer','cost':120,'id':3, 'quantity ':0},
          {'item':'plywood','cost':360,'id':4, 'quantity ':0},
          {'item':'marker','cost':220,'id':5, 'quantity ':0},
          {'item':'roughwood','cost':480,'id':6, 'quantity ':0},
      ],
      msg: 'Counter',
    }
  },
  mounted:function(){
    this.bill();
  },
  methods:{
    bill(){
      this.qty = this.p.quantity;
      if(this.qty>0){
        btn:true;
      }
    }
  }
}
</script>

Answer 1

这是 computed properties 的一个很好的用例：

computed: {
    showButton() {
      var showButton = false;
      this.products.forEach(product => {
        if (product.quantity > 0) {
          showButton = true;
        }
      });
      return showButton;
    }
  }

此外，您必须将 number 添加到 v-model，这样它就不会存储为字符串。

您的整个代码如下所示：

<template>
  <div id="about">

    <table class="table table-striped">
      <thead>
        <tr>
          <td>S.No#</td>
          <td>Product</td>
          <td>Cost</td>
          <td>Quantity</td>
          <td>Total</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(p, index) in products" :key="index">
          <td>1</td>
          <td>{{p.item}}</td>
          <td>{{p.cost}}</td>
          <td><input type="number" class="form-control qty-box" name="" v-model.number='p.quantity' min="0"></td>
          <td>{{p.cost*p.quantity}}</td>
        </tr>
      </tbody>
    </table>
    <div class="row">
      <div class="col-md-12">
        <p v-if="showButton">
          <button class="btn btn-success">Confirm</button>
        </p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      btn: false,
      counter: 8,
      qty: 0,
      proTotal: "",
      products: [
        { item: "timber", cost: 250, id: 1, quantity: 0 },
        { item: "wood", cost: 240, id: 2, quantity: 0 },
        { item: "primer", cost: 120, id: 3, quantity: 0 },
        { item: "plywood", cost: 360, id: 4, quantity: 0 },
        { item: "marker", cost: 220, id: 5, quantity: 0 },
        { item: "roughwood", cost: 480, id: 6, quantity: 0 }
      ],
      msg: "Counter"
    };
  },
  computed: {
    showButton() {
      var showButton = false;
      this.products.forEach(product => {
        if (product.quantity > 0) {
          showButton = true;
        }
      });
      return showButton;
    }
  }
};
</script>

vue.js 如何从循环外部获取 v-for 循环数据

how to get v-for loop data from outside of loop also in vue.js

vue.js

vue-cli