Vue.jsボタンをクリックすると動的にHTMLが追加される

Question

基本的に私が達成しようとしているのは、JSONからVueに渡される既存の情報セットにユーザーが追加できるようにすることです。

したがって、次のコードは、idueがobjectiveAreaのdiv要素と、ユーザーがより多くのエントリを追加するためのハードコードされたボタンで構成されたHTMLコードです。ここ

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

そして、それは追加ボタンがトリガされたときにonclickイベントを持つだけでなく、レンダリングするために、私はVUEにJSONを渡す私のJavascriptのです。 addNewObjectiveRowは、ユーザーが追加をクリックしたときに追加するテンプレートとして機能し、objectiveElementsは、既存のJSONをHTMLにレンダリングするためのvueのテンプレートです。

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 

しかし、上記のコードは、HTMLでうまくJSONから既存の情報をレンダリングするが、私は追加ボタンをクリックすると、何もまったく起こりません。私は何かを逃したり、それをすべて間違っていますか？

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