Question

所以基本上我想要实现的是允许用户能够添加到将从JSON传递给Vue的现有信息集。

所以下面的代码是我的HTML代码，它由vue将呈现的id #header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { background-color: #faa220; font-family: Arial, Helvetica, sans-serif; position: absolute; bottom: 0; right: 215px; } .container a { float: left; font-size: 18px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; position: absolute; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 18px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; cursor: pointer; } .container a:hover, .dropdown:hover .dropbtn { background-color: #faa220; } .dropdown-content { display: none; position: absolute; background-color: #faa220; min-width: 100px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: white; padding: 12px 16px; text-decoration: none; /*display: block;*/ text-align: left; position: static; } .dropdown-content a:hover { background-color: #faa220; position: absolute; bottom: 0; } .dropdown:hover .dropdown-content { position: absolute; display: block; bottom: 0; }的div元素和用户添加更多条目的硬编码按钮组成。

<div id="header">
    <img src="../JPEG/i2i logo 2.jpg" align="left" id="Logo2" />
    <div id="container">
      <div class="dropdown">
            <a href="index.html"><button class="dropbtn">Home</button></a>
        </div><!--dropdown close div-->
        <div class="dropdown">
            <a href="about.html"><button class="dropbtn">About Us</button></a>
            <div class="dropdown-content">
                <a href="bio.html">Bio</a><br>
                <a href="news.html">News</a><br>
                <a href="partners.html">Partners</a>
            </div><!--dropdown-content close div-->
        </div><!--dropdown close div-->
        <div class="dropdown">  
            <a href="awards.html"><button class="dropbtn">Awards/Certifications</button></a>
        </div>
        <div class="dropdown">
            <a href="services.html"><button class="dropbtn">Services</button></a>
            <div class="dropdown-content">
                <a href="solar.html">Solar</a><br>
                <a href="water.html">Water</a><br>
                <a href="housing.html">Housing</a><br>
                <a href="training.html">Training</a><br>
                <a href="broadband.html">Broadband</a>
            </div><!--dropdown-content close div-->
        </div><!--dropdown close div-->
        <div class="dropdown">
            <a href="help.html"><button class="dropbtn">How You Can Help</button></a>
            <div class="dropdown-content">
                <a href="donate.html">Donate</a><br>
                <a href="volunteer.html">Volunteer</a><br>
                <a href="intern.html">Intern</a>
            </div><!--dropdown-content close div-->
        </div><!--dropdown close div-->
        <div class="dropdown">
            <a href="contact.html"><button class="dropbtn">Contact</button></a>
            <div class="dropdown-content">
                <a href="email.html">Email</a><br>
                <a href="faqs.html">FAQS</a><br>
                <a href="newsletter.html">Newsletter</a>
            </div><!--dropdown-content-->
        </div><!--dropdown close div-->
    </div><!--container close div-->

这是我的Javascript，我将JSON传递给vue，以便在触发添加按钮时呈现以及有onclick事件。函数objectiveArea用作在用户单击add时附加的模板，<div class="form-group" id="objectiveArea"></div> <div><input type="button" value="Add Objective" id="addButton" /></div>是vue的模板，用于将现有JSON呈现给HTML。

addNewObjectiveRow

但是，上面的代码在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（）方法，该方法将新项目添加到数据项中，它将自动呈现新的li

Answer 2

有很多错误 1.您不使用参数值的函数addNewObjectiveRow(value)。 2. Vue是数据驱动的，您应该更改objectivesData，而不是简单地追加字符串。 Read the document

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

2 个答案: