Vue-试图避免改变道具，但没有成功

Question

• 父组件：组

• 子组件：模态

在分组中，我将Modal作为组件。

<modal
                v-if="$store.getters.getClusters"
                id="editIndFeedbackModal"
                title="Edit group feedback"
                :atok="atok"
                :feedback="$store.getters.getCurrentClusterFeedback"
                :hint="$store.getters.getCurrentClusterHint"
                :grade="$store.getters.getCurrentClusterGrade"
                :nextAss="$store.getters.getCurrentClusterNextAss"
                :recRead="$store.getters.getCurrentClusterRecRead"
                :link="$store.getters.getCurrentClusterLink"
                :clusterName="$store.getters.getCurrentClusterName"
                :clusterId="$store.getters.getCurrentClusterId"
                aria-labelledby="textEditClusterName"
        />

在Modal中，我有一个引导程序模式。

props: [
            'id',
            'ariaLabelledby',
            'atok',
            'file_id_arr',
            'feedback',
            'hint',
            'grade',
            'nextAss',
            'recRead',
            'link',
            'name',
            'clusterId',
            'clusterName',
        ],

并在模式模板中使用，如下所示：

<div class="form-group">
    <textarea v-model="feedback" name="text_feedback" id="text_feedback" 
     class="form-control" style="resize: vertical;" rows="3" placeholder=""> 
    </textarea>
    <label for="text_feedback">Feedback</label>
</div>

由于Modal保存了此输入表单，因此我正在使用v模型更改道具，从而得到了道具变异警告。

我尝试过的事情：

我尝试将道具分配给Modal comp上的本地数据。

data: function () {
            return {
                currentFeedback: {
                    atok: this.$props.atok,
                    feedback: this.$props.feedback,
                },
            }
        },

atok由于在整个生命周期中都存在而返回了很好，但是由于feedback来自异步操作，因此反馈是<空>空，这是整个问题的源头。 / p>

异步操作通过组mounted()分派给vuex：

getAssFiles: function () {
                if (this.atok) {
                    this.$store.dispatch('GET_ASSIGNMENT_FILES', {
                        assign_token: this.atok
                    });
                }

谢谢。

p.s。 该公司使用缩写形式，所以ass =分配。

  

编辑

     

我已经做到了：

data: function () {
            return {
                currentFeedback: {
                    feedback: this.migrateFeedback,
                },
            }
        },
computed:{
    migrateFeedback(){
        this.currentFeedback.feedback = this.$props.feedback
    }

  

相同的结果，但是当使用vue控制台时，当我单击以打开“数据”选项卡时，它突然更新了视图，现在就在那里了，您知道如何解决这个错误的问题吗？