Vue js 2 post data to JSON object

Question

First time Vue js user, trying to learn by building a small blog/article system where a user can add a article and it'll show on the page (and store in the json)

my code so far: I have a Json array I can display. I have a form I can add name and surname to and have it display on the page.

Next: I wish to click my button and have the new name and surname added to my json object in my file.

Question: how can I click on my button and have this add to my users data array ?

My code: 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

Just add a method to add the user and this should work:

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