javascript - Vue js 2 将数据发布到 JSON 对象

Question

第一次使用 Vue js 用户，尝试通过构建一个小型博客/文章系统来学习，用户可以在其中添加文章并将其显示在页面上(并存储在 json 中)

到目前为止我的代码:我有一个可以显示的 Json 数组。我有一个表单，可以添加姓名并将其显示在页面上。

下一个:我希望单击按钮并将新姓名添加到文件中的 json 对象中。

问题:如何单击我的按钮并将其添加到我的用户数据数组中？

我的代码:Hello.vue

<template>
  <div class="justify-content-center align-items-center container ">

 <div class="row">
      <div class="col-12 align-content-center">
        <h2>Total articles: {{ users.length }}</h2>
        <ul class="list-group">
          <li class="list-group-item" v-for="user in users">
            <div class="d-flex w-100 justify-content-between">
              <h5>{{user.firstname}} {{user.lastname}}</h5>
              <small>3 days ago (todo)</small>
            </div>
            <div class="text-justify">
              <p>artical body test here (todo)</p>
              <small>Author (todo)</small>
            </div>
          </li>
        </ul>
      </div>
    </div>

 <div class="row">
      <div class="col-12 align-content-center">
        <form v-on:submit="sub" action="#" method="post">
          <div class="form-group">
            <div class="col-6">
              <label>Add first name:</label>
              <b-form-input type="text" v-model="input_val_firstName" placeholder="Enter your first name"></b-form-input>
            </div>
            <div class="col-6">
              <label>Add second name:</label>
              <b-form-input type="text" v-model="input_val_secondName" placeholder="Enter your second name"></b-form-input>
            </div>
            <div class="col-6">
              <button type="submit" class="btn btn-primary">Add article</button>
            </div>
          </div>
        </form>
      </div>
    </div>

 <div class="row">
      <div class="col-12 align-content-center">
        <h2>Preview article</h2>
        <strong>Name:</strong>
        <span v-text="input_val_firstName"></span>
        <span v-text="input_val_secondName"></span>
        <h3>log:{{log}}</h3>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    methods: {
    },
    name: 'Hello',
    data() {
      return {
        msg: 'Display articles',
        secondmsg: 'This is a blog built in Vue.js.',
        log: "",
        users: [
          {
            firstname: 'Sebastian',
            lastname: 'Eschweiler'
          },
          {
            firstname: 'Bill',
            lastname: 'Smith'
          },
          {
            firstname: 'Tom',
            lastname: 'bull'
          },
          {
            firstname: 'John',
            lastname: 'Porter'
          }
        ],
        input_val_firstName: '',
        input_val_secondName: '',
        counter: 0
      }
    }
  }
</script>

Answer 1

只需添加一个方法来添加用户，这应该可以工作:

addUser: function() {
    this.users.push({
        firstname: this.input_val_firstName,
        lastname: this.input_val_secondName
    })
    // assuming you'd like to clear the input-box fields after adding the user
    this.input_val_firstName = ''
    this.input_val_secondName = ''
}