[Vuejs]-Vue @click event not working for showing modal

by

2👍

✅

I solved it. I just played with my code and changed the code from

<a href="#" @click="editModal(user)">

to

<a href="#" data-toggle="modal" data-target="#addNew" @click="editModal(user)">

.
Do you think it is the good solution? yes or no? please let me know so that i can learn

👤draw134

2👍

I made working example for you

new Vue({
  el: "#app",
  
  data() {
    return {
      users: []
    }
  },
  
  created() {
  	this.fetchUsers()
  },
  
  methods: {
  	fetchUsers() {
			axios.get('https://jsonplaceholder.typicode.com/users')
      	.then(response => this.users = response.data)
    },
    
    newModal() {
			$('#addNew').modal('show');
    },
    
    editModal(user) {
    	$('#addNew').modal('show');
    },
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
<div id="app">
  <button class="btn btn-success" @click="newModal"  data-toggle="modal" data-target="#addNew">Add new</button>
  <table class="table table-hover">
   <tbody>
     <tr>
       <th>ID</th>
       <th>Name</th>
       <th>Email</th>
       <th></th>
     </tr>

     <tr v-for="user in users" :key="user.id">
       <td>{{user.id}}</td>
       <td>{{user.name}}</td>
       <td>{{user.email}}</td>
       <td>
         <a href="#" @click="editModal(user)">
           Edit
         </a>
       </td>
     </tr>
   </tbody>
  </table>
  
  <div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        Here I'm
      </div>
    </div>
  </div>
</div>
👤Emīls Gulbis

Leave a comment