vue.js - Vuejs Add Table Row Dynamically - Save Row Problem

Question

I'm appending <tr> elements to my table as long as the Add Button is clicked. When the Add Button is clicked, I create 7 <input type="text"> to type for the respective columns. I also have Delete and Delete All functionalities and they all work good. Here is my table;

<tr v-for="(table, index) in table" :key="index">
              <td>
                <span class="sidebar-icons">unfold_more</span>
              </td>
              <td>
                <input v-model="table.test1" placeholder="Test1" />
              </td>
              <td>
                <input v-model="table.test2" placeholder="Test1" />
              </td>
              <td>
                <input v-model="table.test3" placeholder="Test1" />
              </td>
              <td>
                <input v-model="table.test4" placeholder="Test1" />
              </td>
              <td>
                <input v-model="table.test5" placeholder="Test1" />
              </td>
              <td>
                <input v-model="table.test6" placeholder="Test1" />
              </td>
              <td>
                <input v-model="table.test7" placeholder="Test1" />
              </td>
              <td>
                <button @click="deleteRow(index)" type="button">Delete</button> 
                <button @click="applyRow()" type="button">Apply</button> 
              </td>
            </tr>

And here is my methods;

 data(){
      return {
        table: []
      }
    },
    components: {
    methods: {
      deleteAll() {
        this.table = [];
      },
      addRow() {
        this.table.push({
          test1: "",
          test2: "",
          test3: "",
          test4: "",
          test5: "",
          test6: "",
          test7: "",
        });
      },
      deleteRow(index){
        this.table.splice(index, 1);
      },
      applyRow(){
        
      }
    }

And here is my question, when I click the add button I trigger the AddRow() methods (I didn't put Add and Delete All button here, they are irrelevant to the question.)

When AddRow gets triggered, the inputs are created and I can type things inside of them but as you can see, the applyRow() function is empty. What I want to do is, when the Apply button is clicked, I want the texts to display in <p></p>, in other words, when the Apply is clicked, I don't want to see any <input type=text> anymore. I want them to be seen as paragraphs. I only want to see the inputs when I click the add button to add a new row. How can I create this applyRow() method?

question from:https://stackoverflow.com/questions/65842101/vuejs-add-table-row-dynamically-save-row-problem

Answer 1

You can achieve this by creating a flag when you add a new row

 addRow() {
        this.table.push({
          test1: "",
          test2: "",
          test3: "",
          test4: "",
          test5: "",
          test6: "",
          test7: "",
          applied: false,
        });
      },

and your applyRow() method should be like

applyRow(index){
       this.table[index].applied = true; 
}

and change your template like

<tr v-for="(table, index) in table" :key="index">
              <td>
                <span class="sidebar-icons">unfold_more</span>
              </td>
              <td>
                <input v-if="!table.applied" v-model="table.test1" placeholder="Test1" />
                <p v-else>table.test1</p>
    enter code here
              </td>
              <td>
                <input v-if="!table.applied" v-model="table.test2" placeholder="Test1" />
                <p v-else>table.test2</p>
              </td>
              <td>
                <input v-if="!table.applied" v-model="table.test3" placeholder="Test1" />
                <p v-else>table.test3</p>
              </td>
              <td>
                <input v-if="!table.applied" v-model="table.test4" placeholder="Test1" />
                <p v-else>table.test4</p>
              </td>
              <td>
                <input v-if="!table.applied" v-model="table.test5" placeholder="Test1" />
                <p v-else>table.test5</p>
              </td>
              <td>
                <input v-if="!table.applied" v-model="table.test6" placeholder="Test1" />
                <p v-else>table.test6</p>
              </td>
              <td>
                <input v-if="!table.applied" v-model="table.test7" placeholder="Test1" />
                <p v-else>table.test7</p>
              </td>
              <td>
                <button @click="deleteRow(index)" type="button">Delete</button> 
                <button v-if="!table.applied" @click="applyRow(index)" type="button">Apply</button> 
              </td>
            </tr>