title: How to target the right ID in a modal window with Vue JS?
body: <p>I am currently learning to connect a Vue JS front with a basic API built on Node.js and Express on a TodoList project using Axios.</p>
  
  <p>My issue is the following:</p>
  
  <p>I have already made all the connections back to the front. I set up the different requests like to add, delete or display. My problem is that I configured the "edit" button to launch a modal window, and I can not correctly target the right item (All my items are displayed.) to be able to make an edit request PATCH.</p>
  
  <p>How to target the right id in my database when I click on button "Edit" to be able to edit only this id.</p>
  
  <pre><code>&lt;div v-for="todo in todos" :key="todo"&gt;
          &lt;div class="modal" tabindex="-1" role="dialog"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title"&gt;Modification&lt;/h5&gt;
                  &lt;button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close"
                  &gt;
                    &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                  &lt;input type="text" v-model="changeTodo" /&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button
                    type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal"
                  &gt;
                    Cancel
                  &lt;/button&gt;
                  &lt;button
                    v-for="todo in todos"
                    :key="todo.id"
                    type="button"
                    class="btn btn-primary"
                    @click="updateTodo(todo.id)"
                  &gt;
                    Modification {{ todo.id }}
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;li
            class="card-title d-flex align-items-center justify-content-between h1"
          &gt;
            {{ todo.title }}
            &lt;div&gt;
              &lt;button
                type="button"
                class="btn btn-outline-success btn-sm mr-2"
                data-toggle="modal"
                data-target=".modal"
              &gt;
                Change
              &lt;/button&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>export default {
    name: "TodoList",
    data() {
      return {
        todos: null,
        newTodo: "",
        changeTodo: ""
      };
    },
    methods: {
      async getAllTodos() {
        const response = await axios.get("http://localhost:4000/api/todos");
  
        this.todos = response.data;
      },
      addTodo() {
        axios.post("http://localhost:4000/api/todos", {
          title: this.newTodo
        });
        this.newTodo = "";
      },
      deleteTodo(id) {
        axios.delete(`http://localhost:4000/api/todos/${id}`);
      },
      updateTodo(id) {
        axios.patch(`http://localhost:4000/api/todos/${id}`, {
          title: this.changeTodo
        });
      }
    },
    mounted() {
      this.getAllTodos();
    }
  };
  </code></pre>