Блог

Я добавляю <tr> элементы в свою таблицу до тех пор, пока Add Button щелкнут. При нажатии кнопки Добавить я создаю 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() метод?

Вы можете добиться этого, создав флаг при добавлении новой строки

  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>