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

Question

So currently I have a web app that loads a dashboard based on a SQL database and that works just fine, each of these elements have buttons and those buttons are SUPPOSED to spawn a modal with the content of the problem and you can interact with it etc.

Recently I have figured out how to use Vue.js to run a function that grabs this information and populate it on the modal. However, this modal can only be templated ONCE before it wont work again. Ex: I can click on problem 1 and problem 1's information is correct. however, if I click problem 2 after that it doesn't work

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;
                    }
                }
            })
    }
})
}

Here is my Script for the vue, assume that the problems load perfectly and this:

<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>

is the modal. Any idea on how to make the modal element able to be used more than once?

Thanks!

Answer 1

I give you nearest illustration of your question ! I thought items is your problem list. As you mentioned you have to clicked button so that pass your clicked data to call method and grab data from items with that pass clicked data and set vue data. I hope it will be ok.. Look at my example

 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>