Nuxt.js动态添加表格行报错：invoice_customer未定义

问题根源 #

你遇到的报错是因为v-for循环的变量和数据源搞反了：

• 模板里写的是v-for="invoice_customers in invoice_customer"，但你在data里定义的数据源是invoice_customers数组
• 循环内部用invoice_customer.amount时，因为循环变量名写错，Vue找不到这个属性，所以抛出未定义的错误

修复方案 #

1. 修正v-for循环 #

把表格里的v-for代码改成：

<tr
  v-for="invoice_customer in invoice_customers"
  :key="invoice_customer.id"
>

这里循环变量用单数invoice_customer，数据源用你data里定义的invoice_customers数组，这样循环内部就能正确访问每一项的属性了。

2. 补全表头对应内容（可选但建议） #

你的表头有"Id"列，但当前td里没有对应内容，建议补上：

<td>{{ invoice_customer.id }}</td>

修改后的完整模板代码 #

<template>
  <div>
    <h3>Customers</h3>
    <input type="text" v-model="search" placeholder="Search for names..." />
    <table v-if="customers.length > 0">
      <tr>
          <th>name</th>
          <th>address</th>
      </tr>
        <tr v-for="customer in customers" :key="customer.id">
          <td>{{ customer.name }}</td>
          <td>{{ customer.address }}</td>
        </tr>

    </table>
    <div class="center">
      <p>Customer</p>
      <select v-if="customers.length > 0">
        <option v-for="customer in customers" :key="customer.id">
          {{ customer.name }}
        </option>
      </select>
    </div>
    <table v-if="invoice_customers.length > 0">
        <tr>
          <th>Id</th>
          <th>Amount</th>
          <th>Expire Date</th>
          <th>Note</th>
        </tr>
        <tr
          v-for="invoice_customer in invoice_customers"
          :key="invoice_customer.id"
        >
          <td>{{ invoice_customer.id }}</td>
          <td>
            <input
              type="number"
              name=""
              id=""
              v-model="invoice_customer.amount"
            />
          </td>
          <td>
            <b-form-datepicker
              id="example-datepicker"
              v-model="invoice_customer.expire_date"
              class="mb-2"
            ></b-form-datepicker>
          </td>
          <td>
            <input type="text" name="" id="" v-model="invoice_customer.note" />
          </td>
        </tr>
    </table>
    <b-button variant="outline-success" @click="addNewInstallment">+ Add New</b-button>
  </div>
</template>

脚本代码（无需修改，保持原逻辑即可） #

<script>
export default {
  name: "IndexPage",
  data() {
    return {
      selected: "",
      customers: [],
      search: "",

      invoice_customers: [{
        id: 0,
        amount: 0,
        expire_date: "",
        note: "",
      }],
    };
  },
  props: {
  },

  async mounted() {
    const response = await this.$axios.$get("/api/customers");
    this.customers = response.data;
    return this.customers.filter((p) => {
      return p.name.toLowerCase().indexOf(this.search.toLowerCase()) != -1;
    });
  },

  methods: {
    addNewInstallment() {    
      this.invoice_customers.push({
        id: 0,
        amount: 0,
        expire_date: "",
        note: "",
      });
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者4ri37ix L