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>

mirkomorati · Accepted Answer · 2020-03-23 17:20:21Z

1

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.

answered Mar 23, 2020 at 17:20

mirkomorati

1551 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 01:53:11Z

1

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.

edited Jul 16, 2022 at 1:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 23, 2020 at 17:13

Michael

1891 silver badge17 bronze badges

Collectives™ on Stack Overflow

vue.js post list not updating after form submission

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related