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

Question

我正在制作这张卡，我真诚地希望实际的购买价格与每种产品的单位和统一价格相协调。为此，我首先做这个:

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='number')增加(id='rest')或减少(id='add')然后是第一部分的方法

 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') 事实上，反射(reflect)了输入中的结果(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
      }
     }
  }

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

Answer 1

如果您想更改观察者上的购买价格值就这样写

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>

在组件数据中添加单位并删除 purchasePrice 、restValue 和 addValue