在[Vue]

Question

我是Java和Vue的新手。 我的网上有个烦人的错误。考虑一个导航列表，用户必须选择一个可用选项：

<div v-if="allOptions.length">
    <label>Please choose option:</label>
    <div class="btn-group btn-group-justified">
        <v-select v-model="searchOptions">
            <v-option v-for="type in allOptions" :value="type">{{ type }}</v-option>
        </v-select>
    </div>
</div>

网络上有许多操作。我们称它们为：A，B，C。他们所有人都有自己的allOptions，我可以在这些动作之间跳转。 用户可以根据需要跳到另一个操作，但是不会重置“ allOptions”的数量，而是将action1的选项置于action2。

我将尝试通过一个示例进行更多解释： 如果我观看动作A并转到动作B-现在，由于某种原因，我可以在选择部分中选择A和B的选项（应该只是B的选项）。

我尝试通过添加以下行来更改watch：

$route (to, from) {
    if(to_action == "A") {
        this.allOptions = "option1,option2";
    }
    if(to_action == "B") {
        this.allOptions = "option3,option4";
    }
    if(to_action == "C") {
        this.allOptions = "option1,option5";
    }
}

但是出现以下错误：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

尝试找出解决此问题的另一种方法后，我看到了以下link。所以我尝试添加：

methods: {
    changeValue: function () {
    this.allOptions= allOptions
    }
},

但是我得到和以前一样的错误。 如何为每个动作更改allOptions？ 顺便说一下，每个动作都有自己的consts文件。

修改

另一段应该有用的代码：

export default {
    router: router,
    props:['allOptions '],
    ...
}