Vue.js 动态表格中设置价格难题：如何解决手动输入价格不更新问题？

vue.js

2024-03-07 01:45:40

Vue.js动态表格行中设置价格的难题及其解决方案

问题概况

在Vue.js中动态创建表格行时，通过Axios调用设置产品价格后，手动键入价格值时原有值不会被清除。这导致用户无法正确更新价格。

根本原因

当手动输入价格值时，不会触发设置价格的方法，因为该值不是通过选择产品来修改的。因此，之前设置的价格不会被覆盖。

全面解决方案

要解决此问题，请为文本框添加@input事件监听器，以便在手动键入时触发设置价格的方法。使用键入安全事件监听器以确保事件监听器在非Vue事件上触发，并提供默认价格值以防止文本框为空。

修复代码

修改后的代码如下：

<input class="textbox text-right" type="text"  v-model="invoice_product.product_price" @input.native="setprice($event)" />

methods: {
    setprice(e)
    {    
      this.axios.get('/getproduct/' + e.target.value).then((response) => {        
        if (response.status == 200) {
          e.target.parentElement.nextElementSibling.getElementsByTagName('input')[0].value = response.data[0].price || 0
        }
        else {
          console.log(response.data);
        }
      })
    },
     addNewRow() {
        this.invoice_products.push({});
    },