vue.js - 为什么我的数组在 vuejs 中没有反应？

问题描述

各位晚上好，

我一直在使用 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不适用于计算数据。

谢谢！

晚上好！

标签： vue.jsvue-reactivity

vue.js - 为什么我的数组在 vuejs 中没有反应？

问题描述

解决方案

推荐阅读