CODEWITHSUNDEEP
htmlcssvue.js
kehalS
kehalS

Reputation: 25

Use modal on a v-for element?

I am getting a GET request from my api to disply all users , and i want to modify maybe the name of the email of each users with a modal. The problem is , imagine i have 3 users displayed , 3 modals will be displayed even if i press on only one modal button.

How can i do to fix it ?

there is my code :

<template>
  <div class="container">
    <div>
      <h1>
        <b> Users </b>
        <input
          type="text"
          v-model="search"
          class="search"
          placeholder="Search User"
        />
      </h1>
    </div>
    <div class="overlay-container">
      <form>
        <div class="form-group">
          <div
            v-for="user in filterUser"
            v-bind:key="user"
            class="form-control"
          >
            <p>
              <b>{{ user.fname }} </b> {{ user.lname }}
            </p>
            <b-button v-b-modal.modal-1>Modifiy</b-button>

            <b-modal id="modal-1" title="User Modification">
              <p class="my-4">Please edit informations</p>
            </b-modal>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import VueAxios from "vue-axios";
export default {
  name: "users",
  data() {
    return {
      search: "",
      users: [],
    };
  },
  computed: {
    filterUser() {
      return this.users.filter((user) => {
        return user.fname.match(this.search);
      });
    },
  },
  created() {
    axios
      .get(`http://localhost:4000/api/users`)
      .then((Response) => (this.users = Response.data.data));
  },
};
</script>

I want to each users open his own modal, not all modals when i press only one modal button. I hope its clear !

Upvotes: 0

Views: 40

Answers (1)

Ari Shojaei
Ari Shojaei

Reputation: 360

First, pull out the modal inside of v-for, then create a method to get your user index, and add it to the Modify button. this is how you can get the data a user without sending another HTTP Request. and then you can show this.user data in your modal as you want.

<div
 v-for="(user, index) in filterUser"
 v-bind:key="user"
 class="form-control"
>

 <p>
  <b>{{ user.fname }} </b> {{ user.lname }}
 </p>

 <b-button
  v-b-modal.modal-1
  @click="getUserInfo(index)"
 >
  Modifiy
 </b-button>
</div>

data() {
 return {
  search: "",
  users: [],
  user: {}
 };
},

methods: {
 getUserInfo(index) {
  this.user = this.users[index]
 }
}

Upvotes: 0

Related Questions