表单提交后vue.js帖子列表未更新答案

【问题标题】：vue.js post list not updating after form submission表单提交后vue.js帖子列表未更新
【发布时间】：2020-07-04 04:27:10
【问题描述】：

在我的 vue 应用程序中，我有两个组件，一个是将表单数据发布到我的 api 的表单。另一个获取并在页面的一个部分中显示这些帖子。我的问题是，当我提交新帖子时，帖子列表没有更新。除非我刷新页面，否则数据保持不变。提交表单时如何更新我的帖子列表？

我的代码：

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>

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

问题是您实际上只在应用创建时获取您的帖子（即在 created() 方法内）。

您应该将您的 axios 调用封装在一个函数 updatePosts() 中，然后在成功添加新帖子时调用它，或者您可以创建一个自定义事件，在添加新帖子时触发。

【讨论】：

【解决方案2】：

created() 仅被调用一次（参见vue lifecycle），因此您在提交表单之前获取 API。尝试添加一些console.log 以了解什么时候调用。

您可以使用全局事件总线并将表单值作为事件数据发送到摘要。我还可以想象一个解决方案，其中事件用于“告诉”表单已提交的摘要（只是布尔值，而不是数据本身）。总之，您每次收到事件时都会调用 API。

或者简单地在摘要中添加一个“更新”按钮来手动调用 API。

见Communication between sibling components in VueJs 2.0 或global vue instance for events 获取详细示例。

【讨论】：