如何使用 Vue.js 模板化模态并重用它?

Question

所以目前我有一个基于 SQL 数据库加载仪表板并且工作正常的 Web 应用程序，这些元素中的每一个都有按钮，这些按钮应该生成一个带有问题内容的模式，您可以与之交互等。

最近我想出了如何使用 Vue.js 运行一个函数来获取此信息并将其填充到模态上。但是，此模式只能模板化一次，然后才能再次工作。例如：我可以单击问题 1，问题 1 的信息是正确的。但是，如果我之后单击问题 2，它不起作用

new Vue({
delimiters: ['!!!','!!!'],
el: '#problem-modal',
methods: {
close() {
this.$emit('close');
},
},
data: {
items: [],
name: null,
summary: null,
},
mounted: function () {
var self = this;
fetch('./api/problems')
.then(response => {
var response = response.json();
return response;
})
.then(json => {
var data = json.data;
var length = data.length;
for (var i = 0; i<length; i++) {
if (data[i].unique_id == button_id) {
this.name = data[i].problem_name;
this.summary = data[i].summary;
}
}
})
}
})
}

这是我的 vue 脚本，假设问题完美加载，并且：

<div class="modal fade" id="problem-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">!!! name !!!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
!!! summary !!!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

是模态。关于如何使模态元素能够多次使用的任何想法？

谢谢！

Answer 1

我给你最接近你的问题的例子！我以为items是你的问题清单.正如你提到的，你必须点击按钮，以便将你点击的数据传递给调用方法，并从items获取数据，并传递点击的数据并设置 vue 数据。我希望它会没事的.看看我的例子

new Vue({
el: '#problem-modal',
methods: {
show(id) {
let cur = this.items.find(x => x.id == id);
this.name = cur.name;
this.summary = cur.summary;
}
},
data: {
items: [
{
id: 1,
name: "one",
summary: "one summary "
},
{
id: 2,
name: "two",
summary : "two summary"
}
],
name: null,
summary: null,
}
});

button {
width: 100%;
height: 20px;
margin: 10px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="problem-modal">
<button v-for="item in items" @click="show(item.id)">{{item.id}}</button>
<div class="modal">
<h1>{{name}}</h1>
<pre>{{summary}}</pre>
</div>
</div>