javascript - 如何使用 Vue.js 模板化 Modal 并重用它？

Question

所以目前我有一个网络应用程序，它加载基于 SQL 数据库的仪表板，并且工作得很好，每个元素都有按钮，并且这些按钮应该生成一个包含问题内容的模式，您可以进行交互与它等。

最近我想出了如何使用 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 data 。我希望一切顺利..看看我的例子

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>