Vuejs动态添加表格行 - 保存行问题

Question

只要单击Add Button，我就会将<tr> 元素附加到我的表中。单击“添加”按钮时，我会创建 7 个<input type="text"> 来为各个列键入。我也有Delete 和Delete All 功能，它们都很好用。这是我的桌子；

<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>

这是我的方法；

 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(){
        
      }
    }

这是我的问题，当我点击添加按钮时，我触发了AddRow() 方法（我没有在此处放置添加和删除全部按钮，它们与问题无关。）

当触发 AddRow 时，会创建输入，我可以在其中输入内容，但如您所见，applyRow() 函数为空。我想要做的是，当单击应用按钮时，我希望文本显示在 <p></p> 中，换句话说，当单击应用时，我不想再看到任何 <input type=text>。我希望它们被视为段落。我只想在单击添加按钮添加新行时查看输入。如何创建这个applyRow() 方法？

Answer 1

您可以通过在添加新行时创建标志来实现此目的

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

你的 applyRow() 方法应该是这样的

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

并更改您的模板，例如

<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>