[英]V-model on array of elements in Vue.js
I have the following我有以下
<el-row v-for="(position, index) in postForm.positions">
<el-form-item label="Pages" :prop='"pages" + index'>
<el-select v-model="postForm.positions[index].pages" v-bind:key="'page' + index" placeholder="Select Site Pages">
<el-option v-for="page in sitePages" v-bind:key="page.id + index" :label="page.text" :value="page.id" />
</el-select>
</el-form-item>
<el-form-item label="Categories" :prop='"categories" + index'>
<el-select v-model="postForm.positions[index].categories" v-bind:key="'category' + index" placeholder="Select Categories">
<el-option v-for="category in categories" v-bind:key="category.id + index" :label="category.translation.name" :value="category.id" />
</el-select>
</el-form-item>
<el-form-item label="Position" prop='"position" + index'>
<el-select v-model="postForm.positions[index].position" v-bind:key="'position' + index" placeholder="Select Banner Position">
<el-option v-for="sitePosition in siteBannerPositions" v-bind:key="sitePosition.id + index" :label="sitePosition.text" :value="sitePosition.id" />
</el-select>
</el-form-item>
</el-row>
I expect each position row to have its own v-mode but when i change page in a row all other pages in other rows change as well as category and position.我希望每个位置行都有自己的 v 模式,但是当我连续更改页面时,其他行中的所有其他页面以及类别和位置都会更改。
I want each row to be independent from other rows.我希望每一行都独立于其他行。
I have this:我有这个:
<el-form-item>
<el-button type="danger" @click="addPositionRow">+</el-button>
</el-form-item>
And this is my addPositionRow method:这是我的 addPositionRow 方法:
addPositionRow() {
this.postForm.positions.push(new_position_row)
}
Thank you谢谢
Finally i found the solution.最后我找到了解决方案。 I will write it down so that it may help someone else ... I had this
我会把它写下来,以便它可以帮助其他人......我有这个
new_position_row = {
page: undefined,
category_id: undefined,
position: undefined
}
And i was pushing this object into my postForm each time.我每次都把这个对象推到我的 postForm 中。 So i was binding this object to every row just like the following:
所以我把这个对象绑定到每一行,就像下面这样:
addPositionRow() {
this.postForm.positions.push(new_position_row)
}
What i needed to resolve the issue was to bind a new instance of new_position_row in every row just like this:我需要解决这个问题是在每一行中绑定一个 new_position_row 的新实例,就像这样:
addPositionRow() {
const new_position_row = {
page: undefined,
category_id: undefined,
position: undefined
}
this.postForm.positions.push(new_position_row)
}
That's it就是这样
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.