vue.js 我的nuxt页面中出现呈现错误,其中包含无法读取的属性

hjzp0vay  于 2022-12-27  发布在  Vue.js
关注(0)|答案(1)|浏览(190)

我尝试使用nuxt.js中的方法向表动态添加行,但是我定义的prop不起作用...我从控制台收到以下错误:属性或方法“invoice_customer”未在示例上定义,但在呈现过程中被引用。请通过初始化此属性,确保此属性在数据选项中是React性的,或对于基于类的组件是React性的。
我正在尝试使用此模板:

<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_customers in invoice_customer"
          :key="invoice_customers.id"
        >
          <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 true if the product should be visible

      // in this example we just check if the search string
      // is a substring of the product name (case insensitive)
      return p.name.toLowerCase().indexOf(this.search.toLowerCase()) != -1;
    });
  },

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

v-for周期中定义了发票客户

wwtsj6pe

wwtsj6pe1#

您颠倒了v-for中的顺序,它应该是

v-for="invoice_customer in invoice_customers"

相关问题