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?

Do you want to be able to create multiple rows at once ? or just one at a time ? — turbopasi
– turbopasi, Commented Jan 22, 2021 at 9:32

Amaarockz · Accepted Answer · 2021-01-22 11:50:25Z

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>

edited Jan 22, 2021 at 11:50

answered Jan 22, 2021 at 9:38

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Yasin Demirkaya Over a year ago

I did pretty much the same thing but I forgot putting the index inside of the applyRow function and it was showing and hiding every row. Now it's perfect. Thank you for your reply.

Yasin Demirkaya Over a year ago

What should I do if I want to hide Apply Button after its clicked? I mean, when I fill all 7 inputs I click Apply and the row is inserted. At that point, I don't need Apply button to be seen.

Amaarockz Over a year ago

add a v-if for that button also

Yasin Demirkaya Over a year ago

Okay one final question :) I have also a draggable function in my table so I can drag rows when I want them above or below etc... So If I put the second row above, the first one's ID will be 2, and the second row's will be 1. How do I give the ID information automatically. The first added row is 1, the second row is 2 etc. I mean, let's prevent user to type the ID and give it in advance. How do I do that?

Amaarockz Over a year ago

add :id="index" to your <tr></tr>

|

Collectives™ on Stack Overflow

Vuejs Add Table Row Dynamically - Save Row Problem

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related