How to edit modal input area vue js

Question

I am developing task manager app and ı have a problem. I want to edit existing task but when i use v-model my task editing withoute save button. I dont want this. I want to edit with save button and make api call after click save buttton to save database.

How can i do this? Can i use assigne props to new variable or do you have any idea?

 <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{task.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">
          <form>
            <div class="form-group">
              <label for="taskNameInput">Task Name</label>
              <input
                type="text"
                placeholder="Please enter new task name"
                class="form-control"
                id="taskNameInput"
                maxlength="25"
                v-model="task.name"
              />



      <div class="modal-footer">
          <button
            type="button"
            style="width: 100%"
            class="btn btn-success"
          >
            Save Task
          </button>
          <button
            type="button"
            style="width: 100%"
            class="btn btn-success"
          >
            Delete Task
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "UpdateModal",
    props: ["task"],

    methods: {
        updateTask(){
            
        }
    }

This might help: https://stackoverflow.com/questions/58273242/how-to-create-a-simple-modal-for-create-edit-functions-in-vue-js — Lidprogsky, May 17 '21 at 13:23
How about not using `v-model` and just getting the value directly from input on save? — T J, May 17 '21 at 13:37

score 0 · Answer 1 · answered May 17 '21 at 15:03

You need @click in button tags and the function async in methods to call your API.

look here about event handling:
https://v3.vuejs.org/guide/events.html#listening-to-events

and look here about async calls using axios:
https://serversideup.net/using-axios-to-make-api-requests-with-vuejs/

Celdus · Answer 2 · 2021-05-19T09:54:07.330

My assumption is, that you have one createTask (or similar) and one updateTask method. You now want to call one of these functions based on the passed property task.

So your button must react based on the mode (Edit/Save) to execute the right method. Otherwise, if you find it easier, you can use a wrapper method and make the decision there.

 <button
            type="button"
            style="width: 100%"
            class="btn btn-success"
            @click="mode == 'Edit' ? updateTask() : createTask()" // click-function based on the mode
          >
 {{mode}} Task
</button>

And add in your scipt the following:

data: {
    mode: 'Save' // default mode should be save
},
mounted() {         
    if(this.task.name) // identify if task already exist
        this.mode = "Edit";         
},

How to edit modal input area vue js

2 Answers2