Home » vue » vue.js post list not updating after form submission

vue.js post list not updating after form submission

Posted by: admin November 26, 2021 Leave a comment

Questions:

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>
Answers:

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.

###

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.