vue.js post list not updating after form submission

Question

In my vue app I have two components one which is a form that posts the form data to my api. And the other gets and displays these posts in a section on the page. My issue is that when I submit a new post the posts lists aren't updated. The data stays the same unless I refresh the page. How can I get my posts list to update when I submit the form?

My Code:

client/src/App.vue

<template>
  <div id="app">
    <MainHeader :modalVisability="modal" v-on:showModal="toggleModal" />
    <div id="content_wrap">
      <Summary />
    </div>
    <OppForm :modalVisability="modal" />
  </div>
</template>

<script>
import MainHeader from './components/MainHeader.vue';
import OppForm from './components/oppForm.vue';
import Summary from './components/Summary.vue';

export default {
  name: 'App',
  components: {
    MainHeader,
    Summary,
    OppForm
  },
  data () {
    return {
      modal: false
    }
  },
  methods: {
    toggleModal (modalBool) {
      this.modal = modalBool;
    }
  }
}
</script>

client/src/components/oppForm.vue

<template>
    <div id="opp_form_modal" >
        <form @submit.prevent="SubmitOpp" v-if="modalVisability">
            <input type="text" name="company_name" v-model="company_name">
            <button type="submit">Submit</button>
        </form>
    </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'oppForm',
  props: {
    modalVisability: Boolean,
  },
  data () {
    return {
      company_name: ''
    }
  },
  methods: {
    SubmitOpp () {
      axios.post('http://localhost:5000/', {
        company_name: this.company_name,
      })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
}
</script>

client/src/components/Summary.vue

<template>
    <div id="summary_section">
        <h2>Summary</h2>

        <div id="summary_board">
            <div class="column">
                <div class="head">
                    <h3>Opportunities</h3>
                </div>

                <div class="body">
                    <div class="post" 
                        v-for="(post, index) in posts"
                        :key="index"
                    >   
                        <p class="company">{{ post.company_name }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data() {
            return{
                posts: []
            };
        },
        created() {
            axios.get('http://localhost:5000/')
            .then(res => {
                // console.log(res);
                const data = res.data;
                this.posts = data;
            })
            .catch(error => console.log(error));
        }
    }
</script>

score 1 · Answer 1 · edited Jul 16 '22 at 01:53

created() is called only once (see vue lifecycle) so you fetch API before submitting form. Try to add some console.log to understand what is called when.

You could use an global event bus and send form value as event data to summary. I could imagine also a solution where event is used to "tell" summary that form was submitted (just boolean, not data itself). In summary you then call API each time you receive event.

Or simple add an "update" button to summary to manually call API.

See Communication between sibling components in VueJs 2.0 or global vue instance for events for detailed examples.

score 1 · Answer 2 · answered Mar 23 '20 at 17:20

The problem is that you're actually fetching your posts only on the app creation (i.e. inside the created() method).

You should wrap your axios call inside a function updatePosts() and then call it whenever you add a new post successfully, or you could create a custom event that is triggered whenever a new post is added.

vue.js post list not updating after form submission

2 Answers2