为什么我的数组在Vue.js中不反应？

问题描述

大家晚上好

我一直在使用vuejs，nodejs和mysql数据库作为个人项目建立一种社交网络。

基本上，您可以发布一条消息，然后人们可以对其进行答复。我将评论绑定到使用ID发布的内容。我有两个表：1条评论和1条帖子。如果发布了对第38号帖子的评论，则在mysql表中有一个字段idPost = 38。

我有一个功能，通过单击一个按钮来显示帖子的所有答案，即：

    displayAnswers(id) {
                axios.get('http://localhost:3000/wall/answer/get/'+id )
                .then(response => {
                    this.answers = response.data.resultat;
                })
                .catch(error => {
                    console.log(error);
                })
            }

id是我要显示答案的帖子的ID。

现在，问题是当我添加评论时，我需要刷新页面以查看评论或通过调用displaypost函数来强制刷新，如下所示：

    postAnswer(id) {
                let syntaxe = /^[a-z A-ZáàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ0-9-]{1,}$/;
                if(syntaxe.test(this.answerToPost)) {
                    let answer = {
                        message: this.answerToPost,postId: id,auteur: this.$store.state.pseudoUser
                    }
                    axios.post('http://localhost:3000/wall/post/answer',answer)
                    .then(response => {
                        console.log(response);
                        this.feedbackMessage = response.data.message;
                        this.isAlert = false; 
                        this.answerToPost = '';
                        setTimeout(() => {
                            this.feedbackMessage = ''
                        },2000);
                        this.displayAnswers(id);
                    })
                    .catch(error => {
                        console.log(error);
                        this.feedbackMessage = error.response.data.message; 
                        this.isAlert = true; 
                    })
                } else {
                    this.errorMessage = "Le message ne respecte pas la syntaxe autorisée";
                    return;
                }
            },

总而言之，我对this.answers的数据没有反应。在应用中以这种方式声明：

    data() {
            return {
                Auteur: '',displayPostAnswers: [],answerToPost: '',isAlert: true,feedbackMessage: '',answers: ''
            }
        },

并在模板中以这种方式调用，使用v-for循环显示答案：

    <div v-for="answer in answers" :key="answer.id" class="answerDisplayer" > 
                <div class="containerEachAnswer">
                    <div class="avatarAuteur">
                        <img src="../assets/defaultUser.png" width="48" height="48" alt="">
                    </div>
                    <div class="answer">
                    <span>
                    <strong>{{ answer.auteur }}</strong><br>
                    {{ answer.message}}
                    </span>
                    </div>
                </div>
                </div>
            </div>

我在互联网上寻找了这个问题，发现了这个文档：https://fr.vuejs.org/v2/guide/reactivity.html。因此，我尝试使用功能Vue.set，但似乎不起作用。

我想知道经验丰富的开发人员是否可以帮助我找到另一种方式使我的数据具有响应性或以另一种方式帮助我进行数据处理，所以我尝试了几种方法，但是没有用。

PS：我尝试使用计算数据，但是v-for不适用于计算数据。

谢谢！

晚上好！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue-reactivity vue.js