javascript Vue js动态表行问题

gcxthw6b 于 6个月前发布在 Java

关注(0)|答案(1)|浏览(68)

我使用vus js来动态创建表格行，但是当我点击添加新行时，前一行的价格文本框值被清除。
但当我手动键入价格值，并点击添加新行，价格值不清除，但我想从axios调用只获得价格值
请帮助我解决这个问题，并指出我做错了什么
我的模板代码：

<tr v-for="(invoice_product, k) in invoice_products" :key="k">
<td scope="row" class="trashIconContainer">
  <button class="btn-outline-danger btn-sm rem_row" type="button" @click="deleteRow(k, invoice_product)"><i class="fa fa-times"></i></button>       
</td>   
<td>
      <select id="product" name="product" v-model="invoice_product.product_name" @change="setprice($event)">
            <option v-for="(spro, index) in supplierproducts" :key="index" :value="spro.id">{{ spro.name }}</option>
          </select>
</td>
<td>
    <input class="textbox text-right" type="text"  v-model="invoice_product.product_price" 
    />
</td></tr>

字符串
我的脚本代码：

data() {
    return {
      errors: {},
      valid: true,
      suppliers: [],
      supplierproducts: [],
      input: {
        supplier: ""
      },
      invoice_subtotal: 0,
        invoice_total: 0,
        invoice_tax: 5,
        invoice_products: [{
            product_name: '',
            product_price: ''
        }]
    }
  },
  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
        }
        else {
          console.log(response.data);
        }
      })
    },
     addNewRow() {
        this.invoice_products.push({});
    },

型

JavaScript

来源：https://stackoverflow.com/questions/77750461/vue-js-dynamic-table-row-issue

1条答案

按热度按时间

yvfmudvl1#

1.永远记住在vue中更改数据而不是更改dom，vue会自动帮助您更改dom
1.始终记住为React数据提供默认值。

<tr v-for="(invoice_product, k) in invoice_products" :key="k">
<td scope="row" class="trashIconContainer">
  <button class="btn-outline-danger btn-sm rem_row" type="button" @click="deleteRow(k, invoice_product)"><i class="fa fa-times"></i></button>       
</td>   
<td>
      <select id="product" name="product" v-model="invoice_product.product_name" @change="setprice(invoice_product)">
            <option v-for="(spro, index) in supplierproducts" :key="index" :value="spro.id">{{ spro.name }}</option>
          </select>
</td>
<td>
    <input class="textbox text-right" type="text"  v-model="invoice_product.product_price" 
    />
</td></tr>

data() {
    return {
      errors: {},
      valid: true,
      suppliers: [],
      supplierproducts: [],
      input: {
        supplier: ""
      },
      invoice_subtotal: 0,
      invoice_total: 0,
      invoice_tax: 5,
      invoice_products: [{
        product_name: '',
        product_price: ''
      }]
    }
  },
  methods: {
    setprice(product) {
      this.axios.get('/getproduct/' + e.target.value).then((response) => {
        if (response.status == 200) {
        //1. Always remember changing data instead of changing dom in vue, and vue will 
         //automatically help you change the dom
          product.product_price = response.data[0].price
        } else {
          console.log(response.data);
        }
      })
    },
    addNewRow() {
     // 2. Always remember  providing default value for a reactive data.
      this.invoice_products.push({
        product_name: '',
        product_price: ''
      });
    },

字符串

赞(0）回复(0）举报 6个月前

我来回答

javascript Vue js动态表行问题

1条答案

相关问题

热门标签

最新问答