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 = ''
}