我尝试使用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周期中定义了发票客户
1条答案
按热度按时间wwtsj6pe1#
您颠倒了
v-for
中的顺序,它应该是