需要帮助。我对Vue.js相当陌生,需要一些帮助和建议。
背景:
我有一个内部带有BS模式的组件,它在for循环中呈现,显然有很多示例。
发布日期:
The very first rendered component has its data received from parent via props, and the rest component have their own (like row.id and etc.)
问题:怎么解决?可能是BS模式的问题?
组成部分:
let vSelect = Vue.component("v-select", VueSelect.VueSelect);
var scoringButton = Vue.component("scoring-button", {
props: ["loadId", "causeData"],
template: "#scoring-template",
components: {
"v-select": vSelect,
},
data: function () {
return {
scoredLoadId: this.loadId,
scoring: null,
causeId: null,
selectedCause: null,
causeList: this.causeData,
};
},
computed: {
showCauseList() {
if (this.scoring === "1" || this.scoring === null) {
return true;
}
return false;
},
},
});
模板:
<template v-cloak id="scoring-template">
<div class="scoring-block" :id="scoredLoadId">
<div class="scoring">
<button
v-if="scoring === '1'"
title="Scoring button"
type="button"
class="btn btn-success scoring-btn"
data-bs-toggle="modal"
data-bs-target="#scoringModal"
>
<i class="bi bi-hand-thumbs-up-fill"></i>
</button>
<button
v-else-if="scoring === '2'"
title="Scoring button"
type="button"
class="btn btn-danger scoring-btn"
data-bs-toggle="modal"
data-bs-target="#scoringModal"
>
<i class="bi bi-hand-thumbs-down-fill"></i>
</button>
<button
v-else
title="Scoring button"
type="button"
class="btn btn-info scoring-btn"
data-bs-toggle="modal"
data-bs-target="#scoringModal"
>
<i class="bi bi-hand-thumbs-up-fill"></i>
<i class="bi bi-hand-thumbs-down-fill"></i>
</button>
</div>
<div
class="modal fade scoring-modal"
id="scoringModal"
tabindex="-1"
role="dialog"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content" :key="loadId">
<div class="modal-header">
<h1 class="modal-title">Load Scoring</h1>
<button
type="button"
class="btn-close"
aria-label="Close"
data-bs-dismiss="modal"
></button>
</div>
<div class="modal-body">
<div class="scoring-content">
<input
type="radio"
class="btn-check"
name="btnScore"
id="btnLike"
autocomplete="off"
checked="scoring === '1'"
value="1"
v-model="scoring"
/>
<label
class="btn btn-outline-success"
for="btnLike"
@click="clearSelectedCause"
>
<i class="bi bi-hand-thumbs-up-fill"></i> Like
</label>
<input
type="radio"
class="btn-check"
name="btnScore"
id="btnDislike"
autocomplete="off"
:checked="scoring === '2'"
value="2"
v-model="scoring"
/>
<label class="btn btn-outline-danger" for="btnDislike">
<i class="bi bi-hand-thumbs-down-fill"></i> Dislike
</label>
</div>
<div class="scoring-cause">
<v-select
:disabled="showCauseList"
label="name"
:options="causeList"
v-model="selectedCause"
placeholder="Choose a cause option"
></v-select>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</template>
母公司:
var mainTableApp = new Vue({
el: "#main-table",
data: {
tableData: [],
scoringCauseList: [
{
"id": 6,
"scoring_type": 0,
"name": "Late at loading",
"mark": "late_at_loading"
},
{
"id": 7,
"scoring_type": 0,
"name": "Special conditions were not respected",
"mark": "special_conditions_were_not_respected"
},
{
"id": 8,
"scoring_type": 0,
"name": "Bad/not enough information",
"mark": "bad_not_enough_information"
}
],
},
components:{
'scoring-button': scoringButton,
}
});
主应用程序块中的组件:
<div
v-for="row in tableData"
class="row-container"
>
....
<scoring-button
:id="row.LOAD_ID"
:key="row.LOAD_ID"
:load-id="row.LOAD_ID"
:cause-data="scoringCauseList"
>
</scoring-button>
....
</div>
我试着重新设置BS modal的数据,但是没有成功。所以,我回去在Vue部分寻找解决方案。
我知道我可能构造整个事情不够在一个非常正确的方式,但下面的代码是最后一个版本后,许多其他的解决方案,已尝试与v模型,$emit, prop 等。
1条答案
按热度按时间mpgws1up1#
更新:找到解决方案。
为组件中的所有“input”字段添加了“:id”。
因此,要让可重用组件拥有自己的数据属性,你需要有动态的“:id”属性,这样,每个数据都流入自己的组件。