Vue.js在點擊按鈕時動態添加HTML

Question

所以基本上我試圖實現的是允許用戶能夠添加到現有的一組信息中，這些信息將從JSON傳遞給Vue。

所以下面的代碼是我的HTML代碼，它包含vue會呈現給用戶的ID爲objectiveArea的div元素以及用戶添加更多條目的硬編碼按鈕。

<div class="form-group" id="objectiveArea"></div> 
<div><input type="button" value="Add Objective" id="addButton" /></div> 

這裏是我的javascript，我通過JSON到VUE它渲染以及添加按鈕被觸發時有一個onclick事件。功能addNewObjectiveRow充當用戶單擊添加時附加的模板，並且objectiveElements是用於將現有JSON呈現到HTML的模板。

function addNewObjectiveRow(value) { 
      var $divElements = "<div class='row'>" 
       + "<div class='form-inline'>" 
       + "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' /></div></div>" 
       + "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;" 
       + "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>" 
       + "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;" 
       + "<div class='form-group'><label class='control-label'></label><div><input type='button' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>" 
       + "</div>" 
       + "<br />" 
       + "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...'></textarea></div></div><hr />" 
       + "</div>" 
      return $divElements; 
     } 

var objectiveElements = "<div class='row'><div v-for='(objective, index) in objectivesData'>" 
      + "<div class='form-inline'>" 
      + "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' v-model='decodeData(objective.Title)' /></div></div>" 
      + "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;" 
      + "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' v-formatdate='objective.TargetDate' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>" 
      + "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;" 
      + "<div class='form-group'><label class='control-label'></label><div><input type='button' v-if='(index > 0)' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>" 
      + "</div>" 
      + "<br />" 
      + "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...' v-model='decodeData(objective.Details)'></textarea></div></div><hr />" 
      + "</div></div>"; 

var data = JSON.parse('[{"Title":"Title One","TargetDate":"21 June 2017","Details":"Details One"},{"Title":"Title Two","TargetDate":"22 June 2017","Details":"Details Two"}]'); 
var Objectives = Vue.extend({ 
     template: objectiveElements, 
     data: function() { 
       return { 
       objectivesData: data 
        } 
       } 
     }) 

new Objectives().$mount('#objectiveArea'); 

$('#addButton').on('click', function() { 
    $('#objectiveArea').append(addNewObjectiveRow(""));    
});//end addButton on click 

然而，上面的代碼將呈現從JSON現有的信息在HTML就好了，但是當我點擊添加按鈕，沒有任何反應都沒有。我是否錯過了某些東西，或者錯了嗎？

Answer 1

https://vuejs.org/v2/guide/list.html

HTML

<ul id="example-1"> 
    <li v-for="item in items"> 
    {{ item.message }} 
    </li> 
</ul> 
<button @click="addItem()">Add new item</button> 

JS

var example1 = new Vue({ 
    el: '#example-1', 
    data: { 
    items: [ 
     { message: 'Foo' }, 
     { message: 'Bar' } 
    ] 
    }, 
    methods: { 
    addItem(){ 
     this.items.push({message: 'new message'}) 
    } 
    } 
}) 

點擊按鈕將執行這將增加一個新項目插入數據項的addItem（）方法，它會自動呈現新麗

Answer 2

有很多錯誤 1.函數addNewObjectiveRow(value)您不使用參數值。 2. Vue是數據驅動的，你應該改變objectivesData，而不是簡單的追加字符串。 Read the document