Модальное окно не активно

Question

Я создаю модальное окно, используя этот пример:

jsfiddle

В модале отправляю данные из таблицы. Мой код:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
        <!--begin modal  -->
        <div id="my-modal" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Item Clicked!</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Text:{{text}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
  <!--end modal -->


    <table class="table table-condensed">
        <thead>
        <tr>
            <th>id</th>
            <th>task</th>
            <th>date</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in tasks">

            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.id}}</td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">
                {{row.text}}
                <a data-toggle="modal" :data-target="'#myModal' + row.id" @click="itemClicked(row)">Edit from git</a>
            </td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.date_current}}</td>

        </tr>
        </tbody>
    </table>
</div>

Но по какой-то причине модальное окно не активно: введите описание ссылки здесь

Как это исправить? По какой-то причине окно не активно. Сценарий текст ее, только часть для модальных:

Script:
<script type="text/javascript">
    //send post and open menu
    new Vue({
        el: '#app6',
        data:{
            tasks:[],
            fields:[
                'id','text','date',
            ],
            text:'',
            id:'',
            active: true,              
        },
        methods: {

            itemClicked: function(item) {
                this.id = item.id;
                this.text = item.text;
              //  console.log(item.id);
                $("#my-modal").modal('show');
            }
               //open edit windows
        }
    })

Текстовые туманы получают минимальный лимит.

Answer 1

В примере они используют комбинацию Bootstrap / jQuery. Так что это то, что вы должны использовать для того, чтобы ваш код работал, а не Bulma. Опять же, самый простой способ - просто использовать CDN. Так что вам нужно включить эти строки в ваш head или где-то перед вашим главным #app Div ..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

И удалите таблицу стилей Bulma. Это испортило стили Bootstrap..

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

new Vue({
  el: '#app6',
  data: {
    tasks: [],
    fields: [
      'id', 'text', 'date',
    ],
    text: '',
    id: '',
    active: true,
  },
  methods: {

    itemClicked: function(item) {
      this.id = item.id;
      this.text = item.text;
      //  console.log(item.id);
      $("#my-modal").modal('show');
    }
    //open edit windows
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app6">
  <div id="my-modal" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Item Clicked!</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
        </div>
        <div class="modal-body">
          Text:{{text}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!--end modal -->


  <table class="table table-condensed">
    <thead>
      <tr>
        <th>id</th>
        <th>task</th>
        <th>date</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in tasks">

        <td span @mouseover="showButtonFunction" @mouseleave="hideButtonFunction"> {{row.id}}</td>
        <td span @mouseover="showButtonFunction" @mouseleave="hideButtonFunction">
          {{row.text}}
          <a data-toggle="modal" :data-target="'#myModal' + row.id" @click="itemClicked(row)">Edit from git</a>
        </td>
        <td span @mouseover="showButtonFunction" @mouseleave="hideButtonFunction"> {{row.date_current}}</td>

      </tr>
    </tbody>
  </table>
</div>

Смотрите это JSFiddle