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