时间戳

首页 > 解决方案 > 将数学运算的结果绑定到 vuejs 中的输入或 div 结果

javascript - 将数学运算的结果绑定到 vuejs 中的输入或 div 结果

问题描述

我正在制作这张卡片，老实说，我希望将购买价格与每种产品的单位和单一价格相协调。为此，我首先做这个：

HTML
<v-card v-if="getAllProducts.products">
        <v-container>
          <input
            type="number"
            id="purchasePrice"
            v-model='purchasePrice'
            value='0'
            style="box-shadow:3px 3px 3px 3px;width:70px;margin-left:105px"
          />
          <v-card-actions>

          <div class="numCont">
            <h3 id="price">${{ProductCard.product_price}}</h3>
            <img
              style="margin-left:195px;margin-top:10px;width:35px; height:30px"
              src="../assets/add.png"
              width="15"
              height="15"
              id="rest"
              @click="addValue"
            />
            <input
              type="number"
              id="number"
              value="0"
              style="box-shadow:3px 3px 3px 3px;width:20px;margin-left:205px"
            />
            <img
              src="../assets/rest.png"
              style="margin-left:200px;margin-top:10px;width:25px; height:25px"
              id="rest"
              @click="restValue"
            />
          </div>



        </v-container>
      </v-card>

在增加（id='rest'）或减少（id='add'）上设置点击操作修改输入值（id='number'）然后这里是第一部分的方法

 methods: {
    ...mapActions(["fetchAllProducts"]),
    addValue() {
      let value = parseInt(document.getElementById("number").value, 10);
      value = isNaN(value) ? 0 : value;
      value++;
      document.getElementById("number").value = value;
    },
    restValue() {
      let value = parseInt(document.getElementById("number").value, 10);
      value = isNaN(value) ? 0 : value;
      value = value < 1 ? 0 : value;
      value--;
      document.getElementById("number").value = value;
    },

  },

直到这里一切正常，但现在假设我想查看这个输入值（id='number'），取用户想要购买的单位数，并将其乘以这个产品的价格（id=' price') 实际上，反映了输入的结果（id='purchasePrice') 因此，根据我的逻辑，我只是​​像这样设置观察者：

watch: {
     purchasePrice(value){console.log(value);
    let priceP= Number(document.getElementById('price'));
    let unities= Number(document.getElementById('number'));
      if(unities>0){
      return value= priceP*unities
      }
     }
  }

但是这最后一步不起作用......输入没有结果假设结果应该显示在。请问有什么建议或替代方法吗？提前致谢！！！

标签： javascriptvue.jsvuex

解决方案

如果你想改变 watcher 上的 purchasePrice 值，就这样写

watch: {
     purchasePrice(value){console.log(value);
    let priceP= Number(document.getElementById('price'));
    let unities= Number(document.getElementById('number'));
      if(unities>0){
      this.purchasePrice = priceP*unities
      }
     }
  }

其他解决方案。

<v-card v-if="getAllProducts.products">
    <v-container>
      <input
        type="number"
        id="purchasePrice"
        readonly
        :value=" parseFloat(ProductCard.product_price) * unities"
        style="box-shadow:3px 3px 3px 3px;width:70px;margin-left:105px"
      />
      <v-card-actions>

      <div class="numCont">
        <h3 id="price">${{ ProductCard.product_price}}</h3>
        <img
          style="margin-left:195px;margin-top:10px;width:35px; height:30px"
          src="../assets/add.png"
          width="15"
          height="15"
          id="rest"
          @click="unities++"
        />
        <input
          type="number"
          id="number"
          v-model="unities"
          style="box-shadow:3px 3px 3px 3px;width:20px;margin-left:205px"
        />
        <img
          src="../assets/rest.png"
          style="margin-left:200px;margin-top:10px;width:25px; height:25px"
          id="rest"
          @click="unities--"
        />
      </div>



    </v-container>
  </v-card>

添加unities组件数据并删除purchasePrice，restValue以及addValue

推荐阅读