привязка результата математических операций c к входу или результату div в vuejs

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 = 'число') при увеличении (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 = 'число'), принимая число единиц, пользователь хочет купить и умножить его на цену этого продукта (id = 'цена'), фактически отражая этот результат во входных данных (id = 'purchasePrice'). Таким образом, в моей логике c я просто смотрю как этот :

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

, если вы хотите изменить значение 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
      }
     }
  }

Other Solution.

<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