Vuejs动态添加Table行-保存行问题

Question

只要单击 Add Button，我就会将 <tr> 元素附加到我的 table。单击“添加”按钮后，我创建了 7 <input type="text"> 以键入相应的列。我还有 Delete 和 Delete All 功能，它们都很好用。这是我的 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>

这是我的方法；

 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() 函数是空的。我想做的是，当点击 Apply 按钮时，我希望文本显示在 <p></p> 中，换句话说，当点击 Apply 时，我不想看到任何 <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>

Vuejs动态添加Table行-保存行问题

Vuejs Add Table Row Dynamically - Save Row Problem

appendchild

vue.js