심재운 블로그

 

 

https://jsfiddle.net/7nxhygLp/

 

<html>
   <head></head>
   <div id="app">
      <table class="table">
         <thead>
            <tr>
               <td><strong>Name</strong></td>
               <td><strong>Job</strong></td>
               <td></td>
            </tr>
         </thead>
         <tbody>
            <tr v-for="row in rows">
               <td><input type="text" v-model="row.name"></td>
               <td><input type="text" v-model="row.job"></td>
               <td><a @click="removeRow(row)">Remove</a></td>
            </tr>
         </tbody>
      </table>
      <div>
         <button class="button btn-primary" @click="addRow">Add row</button>
      </div>
   </div>
</html>

 

<script>
var app = new Vue({
    el: "#app",
    data: {
        rows: [{
                name: "James Bond",
                job: "spy"
            },
            {
                name: "Goldfinger",
                job: "villain"
            }
        ]
    },
    methods: {
        addRow: function() {
            this.rows.push({
                name: "",
                job: ""
            });
        },
        removeRow: function(row) {
            //console.log(row);
            this.rows.$remove(row);
        }
    }
});

</script>

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드