Javascript Vue.js在单击按钮时动态附加HTML

因此，基本上，我试图实现的是允许用户能够添加到现有的一组信息中，这些信息将从JSON传递到Vue

因此，下面的代码是我的HTML代码，它包括一个div元素，该元素的id

objectiverea

，vue将呈现给该元素，以及一个供用户添加更多条目的硬编码按钮

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

但是，上面的代码在HTML中很好地呈现了JSON中的现有信息，但是当我单击add按钮时，什么也没有发生。我是错过了什么还是全错了？

HTML

单击按钮将执行addItem（）方法，该方法将向数据项中添加新项，并将自动呈现新li

HTML

单击按钮将执行addItem（）方法，该方法将向数据项中添加一个新项，并将自动呈现新的li

有许多错误 1.函数

addNewObjectiveRow（value）

不使用参数值。 2.Vue是数据驱动的，您应该更改

objectivesData

，而不是简单地附加字符串

有很多错误 1.函数

addNewObjectiveRow（value）

不使用参数值。

---

2.Vue是数据驱动的，您应该更改

objectivesData

，而不是简单地附加字符串

我不认为这是正确的解决方法。好的，你知道一个更好的方法来解决这个问题吗？我不认为这是正确的解决方法。好的，你知道一个更好的方法来解决这个问题吗？谢谢你的帮助！我已经在我的按钮中添加了一个

v-on:click

属性，并在添加时更新了对象数组，现在可以工作了（：感谢您的帮助响应！我已经在我的按钮中添加了一个

v-on:click

属性，并在添加时更新了对象数组，现在可以工作了（：我意识到我应该在早些时候阅读文档后更改

objectivesData

。感谢您的回复！我意识到我应该在早些时候阅读文档后更改

objectivesData

。感谢您的回复！

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

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

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