Обновление VusJS DOM, когда в раскрывающемся списке выбрано новое значение

Question

Я пытаюсь обновить DOM по следующей логике, но она не работает,

index.vue [Часть шаблона]

<div>
     <div v-for="obj in objects" :key="obj.id">
           <select v-model="obj.quantity" @change="qtyChange(obj)">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

        <div class="w-1/5">
          <p class=" pt-4 text-right">${{ getObjectPrice(obj) }}</p>
        </div>
     </div>
</div>

index.vue [Часть скрипта]

  <script>
         props['selectedObjs'],
         data () {
               return {
                   objects: []
               }
         },
         mounted: {
                      this.objects = this.selectedObjs
                  },
         methods: {
                     getObjectPrice(obj)
                          {
                                // some mathematical calculations
                                // obj.quantity is used in multiplication
                                return answer
                          },

                     qtyChange(obj) {
                                   getObjectPrice(obj)
                     }
                  }
  </script>

Я пытался просмотреть свойство данных объектов, но оно не работает, я должен показать обновленную цену объектов на основе количества, выбранного из раскрывающегося списка.если кто-нибудь может предложить мне хорошее решение.

Answer 1

Попробуйте сохранить выбранное значение в локальных данных. Затем используйте его для расчета. А для расчета лучше использовать computed, а не method. В шаблоне распечатайте ваше вычисленное значение.