时间戳

首页 > 解决方案 > Vuejs 在输入更改时设置 v-model

vue.js - Vuejs 在输入更改时设置 v-model

问题描述

我想拥有v-model并value设置一个输入。这是我的代码：

<td>
    <input v-model="invoice.items[n-1].net_price" type="number" step="0.01" min="1" form="invoice-form">
</td>
<td v-if="invoice.items[n-1].net_price && invoice.items[n-1].quantity">
    <input :value="(invoice.items[n-1].net_price * invoice.items[n-1].quantity).toFixed(2)" type="text" form="invoice-form" readonly>
</td>
<td v-else>
    <input type="text" readonly>
</td>

问题在于第二个输入。现在它是这样工作的：

  1. 您在输入中输入net-price值
  2. 您输入数量
  3. 它计算一个值并将其设置在readonly输入中

现在我想设置v-model第二个输入，但是当我尝试这样做时出现错误。有没有办法将模型设置为这个计算值？

标签： vue.js

解决方案

一种更强大的方法可能是将您的计算逻辑放入一个方法中，并使用解构赋值来解包各个项目的值。此外，变量还可以在解压后的值是默认值undefined的情况下分配——这样，您不再需要担心计算值返回NaN，因为它们会回退到零。

尝试这样的事情：

new Vue({
  data: () => ({
    invoice: {
      items: [
        {
          net_price: 30.05,
          quantity: 4
        },
        {
          net_price: 14.99,
          quantity: 7
        },
      ]
    }
  }),

  methods: {
    calculate({ net_price = 0, quantity = 0}) {
      return (net_price * quantity).toFixed(2);
    }
  }
})
.$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <form id="invoice-form">
    <table>
      <thead>
        <tr>
          <th>Net Price</th>
          <th>Quantity</th>
          <th>Total</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(item, index) of invoice.items" :key="index">
          <td>
            <input v-model="item.net_price" type="number" step="0.01" min="1" form="invoice-form" />
          </td>
          <td>
            <input v-model="item.quantity" type="number" min="0" form="invoice-form" />
          </td>
          <td>
            <input :value="calculate(item)" form="invoice-form" readonly />
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

推荐阅读