javascript - 数组中输入的动态总数

Question

我正在尝试将数组中的总“item_size”相加，显示它并使用结果数字做一些事情。

客户可以设置数量，但商品大小是固定的，因此他们可以拥有任意数量的每件商品。

项目 1

• item_title - “电视”
• item_size - “5”（平方米）
• 数量- “2” （<--这是输入但用户）
• total_mtsq - “10” （<--这是动态的，当数量改变时也会改变）

第 2 项

• item_title - “战衣”
• item_size - “8”（平方米）
• 数量- “2” （<--这是输入但用户）
• total_mtsq - “16” （<--这是动态的，当数量改变时也会改变）

第 3 项

• item_title - “床”
• item_size - “4”（平方米）
• 数量- “3” （<--这是输入但用户）
• total_mtsq - “12” （<--这是动态的，当数量改变时也会改变）

总需要 MTSQ - 38

我的total_mtsq工作没问题，但我正在努力将它们全部加起来，所以如果total_needed_mtsq高于或低于某个数量，我可以做一些事情。

我已经删除了我尝试过的所有内容，因此没有尝试在代码中获取总数。我考虑了 v-models 和/或 foreach 等总数的计算属性。

代码如下，谢谢！

<template>
  <div>
    <div id="step2items0" class="inventory">
      <div class="inner-wrap">
        <label>Choose Your {{ selected }} Items</label>
      </div>
      <div id="tabBtns" class="hr">
        <div class="inner-wrap mobile-center">
          <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(tab)" class="tab" :class="selected_tab == tab ? 'selected' : ''" >
            {{ tab }}
          </div>
        </div>
      </div>

      <div class="items-wrap">
        <div class="item" v-for="(row, index) in items" :key="index">
          <span class="lbl">{{ row.item_title }}</span>

          <span class="input-wrap" style="display: flex; flex-direction: column; align-items: flex-end; border: 1px solid red;">
          <small>Total Item M3</small> 
          <!-- <span>{{ row.total_item_m3 || 0 }} m3</span> -->
          <input type="text" name="item_m3" class="number" v-model="row.total_item_m3"/>

            
          </span>

          <span class="input-wrap" style="display: flex; flex-direction: column; border: 1px solid blue;">
            <small>Item M3</small>
            <input type="text" name="item_m3" class="number" :value="row.item_m3"/>
          </span>
          

          <span class="input-wrap">
            <i aria-hidden="true" class="fa fa-caret-left prev-btn" @click="decreaseQty(row)"></i>

            <input type="text" class="number" min="0" :value="row.qty || 0"/>

            <i aria-hidden="true" class="fa fa-caret-right nxt-btn" @click="increaseQty(row)"></i>
          </span>

          <div class="clear"></div>


          Total Needed M3 - 
            <strong> m3</strong>
          

        </div>

        
      </div>
    </div>
    
  </div>

  
</template>




<script>
module.exports = {
  props: ["selected", "content", "value"],

  data: function () {
    return {
      tabs: [],
      selected_tab: "",
      items: [],
      qty: [],
      item_m3: [],
      total_item_m3: [],
      total_needed_m3: 0

    };
  },
  computed: {

  },


  methods: {
    //

    increaseQty(row) {

      this.$set(row, 'qty', typeof row.qty !== 'undefined' ? row.qty+1 : 1);

      this.$set(row, 'total_item_m3', row.qty * row.item_m3);

      console.log("XXXX - ", row.total_item_m3);


      // let total_item_m3 = row.qty * row.item_m3 + row.item_m3;

      // console.log("Item Title - ", row.item_title, "AMOUNT -", row.qty,  "Item M3 - ", row.item_m3, "Total Item M3 - ", total_item_m3);

    }, 

    decreaseQty(row) {

      if (row.qty < 1) {
        alert("Negative quantity not allowed");
      } else {

        this.$set(row, 'qty', typeof row.qty !== 'undefined' ? row.qty-1 : -1)

        this.$set(row, 'total_item_m3', row.qty * row.item_m3)

        // console.log("Item Title - ", row.item_title, "AMOUNT -", row.qty, "Item M3 - ", row.item_m3, "Total Item M3 - ");
      }

      
    },



    //

    selectTab: function (value) {
      console.log("TAB: ", value);
      this.selected_tab = value;
      const { content } = this;
      let { items } = this;

      content.forEach(function (row) {
        if (row.room_name == value) {
          items = row.item;

          items.forEach(function (row) {
            item_title = row.item_title;
            item_m3 = row.item_m3;
            total_item_m3 = row.total_item_m3;
            console.log("TOTAL M3 - ", total_item_m3);
          });
        }
      });

      this.items = items;
    },
  },
  mounted: function () {


    const { selected, content, tabs } = this;
    let { selected_tab, items } = this;

    // console.log("SELECTED: ", selected);

    if (selected === "Household") {
      content.forEach(function (row) {
        if (row.is_household == true) {
          tabs.push(row.room_name);

          if (selected_tab == "") {
            selected_tab = row.room_name;

            items = row.item;

            items.forEach(function (row) {
              item_title = row.item_title;
              item_m3 = row.item_m3;
              // console.log(" - ", item_title, " - ", item_m3);
            });
          }
        }
      });
    } else if (selected === "Business") {
      content.forEach(function (row) {
        if (row.is_business == true) {
          tabs.push(row.room_name);

          if (selected_tab == "") {
            selected_tab = row.room_name;

            items = row.item;

            items.forEach(function (row) {
              item_title = row.item_title;
              item_m3 = row.item_m3;
              // console.log(row.room_name, " - ", item_title, " - ", item_m3);
            });
          }
        }
      });
    }

    this.selected_tab = selected_tab;
    this.items = items;
  },
};
</script>

标签： javascriptarraysvue.jsdynamicreduce