동적 DOM 요소 - Vue를 사용하여 추가/제거

동적 DOM 요소 - Vue를 사용하여 추가/제거

나는 Vue.js를 배우기 시작했는데, 네가 어떻게 이 일을 Vue.js에서 할 수 있는지 알 수가 없어. 내가 jQuery로 한 것처럼 말이야.

<!-- jQuery -->
<h2>jQuery</h2>
<table id="t1">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
  <tr id="r1">
    <td><input name="item[]" type="text"/></td>
    <td><input name="quantity[]" type="number"/></td>
    <td><button class="deleteRow">X</button></td>
  </tr>
</table>
<button id="addRow">Add Row</button>

.js

// jQuery
$(document).on('click', '#addRow', function(){
    var row = parseInt($('#t1 tr:last-child').attr('id')) + 1;
    alert(row);
        $('#t1').append('<tr id="r'+row+'"><td><input name="item[]" type="text"/></td><td><input name="quantity[]" type="number"/></td><td><button class="deleteRow">X</button></td></tr>');
});

$(document).on('click', '.deleteRow', function(){
        var row = parseInt($(this).closest('tr').attr('id'));
    $('#r'+row).remove();
});

Vue를 사용하여 클릭 한 번으로 완전히 새로운 요소를 생성하는 방법과 이를 제거하는 방법

JSFiddle에 모두 로드됨

VueJS는 데이터 기반이므로 직접 DOM 조작은 잊어버리십시오.

아래 예시를 보면, 내가 정의한 것을 알 수 있을 것이다.inputs배열 - 모든 행을 저장할 장소인 만큼 객체의 배열일 것이다.

우리의 템플릿에서 우리는 반복해서inputs어레이 및 각 입력에 대해 인덱스도 전송 - 행 삭제에 필요함.

addRow메소드는 우리의 새로운 사물을 밀어내는 것이다.inputs배열(사전 정의된 스키마 포함) 및 고유 인덱스를 지정하십시오.

다음은 http://jsbin.com/zusokiy/edit?html,js,output의 예.

템플릿:

  <div id="app">

    <ul>
      <li v-for="(input, index) in inputs">
        <input type="text" v-model="input.one"> - {{ input.one }}  
        <input type="text" v-model="input.two"> - {{ input.two }}
        <button @click="deleteRow(index)">Delete</button>
      </li>
    </ul>

    <button @click="addRow">Add row</button>

  </div>

JS:

const app = new Vue({

  el: '#app',

  data: {
    inputs: []
  },

  methods: {
    addRow() {
      this.inputs.push({
        one: '',
        two: ''
      })
    },
    deleteRow(index) {
      this.inputs.splice(index,1)
    }
  }

})

더 좋은 방법은 부품으로 만드는 거야 하지만 이건 너무 멀고, 너무 좋아

참조URL: https://stackoverflow.com/questions/42508040/dynamic-dom-elements-add-remove-with-vue