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>

但这最后一步不起作用…输入没有结果假设结果应该显示在。 请问您有什么建议或选择吗？

---

提前感谢

如果您想更改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>

${{ProductCard.product_price}

在组件数据中添加单元

---

如果要更改watcher上的purchasePrice值，请删除

purchasePrice

、

restValue

和

addValue

就这样写吧

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>

${{ProductCard.product_price}

在组件数据中添加单元

---

并删除

purchasePrice

，

restValue

和

addValue

非常感谢Gemi的帮助…非常感谢Gemi…非常感谢Gemi…非常感谢Gemi…非常感谢