如何避免使用 Vue 和 Laravel 的警告"mutating a prop directly"

Question

我使用的是Laravel 7和Vue.js 2。我想传递一个雄辩的查询结果从一个控制器到一个Vue.js组件(通过一个视图和另一个组件)。

这是我的控制器

$permissions = Permission::select('id')->get();
return view('admin')->with(['permissions'=>$permissions]);

这是我的观点:

<div id="app">
<admin-panel :permissions="{{  $permissions }}"></admin-panel>
</div>

这是admin-panel组件(通过props传递数据):

<template>
<div>
<admin-operations></admin-operations>    
<hr>
<insert-employee :permissions="permissions"></insert-employee></div>
</template>

insert-employee组件脚本:

<script>
export default {
components: {
},
props: ['permissions'],
mounted() {
console.log('Component mounted.');
},
computed:{
},
data: function() {
return {
}
},
methods: {
}
}
</script>

这是select ininsert-employee组件:

<select required v-model="permissions" class="form-control" id="permissions">
<option v-for="permission in permissions" :value="permission.id" :key="permission.id">
{{ permission.id }}
</option>
</select>

查询的结果应该在选择选项中显示。然而，在选择中，我可以正确地看到选项中的值，但是当我选择一个选项时，选择不起作用，并且在控制台中出现两次以下警告:

app.js:40160 [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. Prop being mutated: "permissions"
found in
---> <InsertEmployee> at resources/js/components/InsertEmployee.vue
<AdminPanel> at resources/js/components/AdminPanel.vue
<Root>

可以帮助吗?

Answer 1

让我们试一下。我认为我们只是把值混合了一点。我会试着把传入的props看作是只读的。在本例中，permissions是一个保存每个权限id的数组。

接下来，我们将使用该数组为user对象提供一些值。这样我们就不会试图操纵permissions的值。这就是Vue最初生气的地方。

<script>
export default {
components: {},

props: {
permissions: {
type: Array,
required: true,
default: () => [],
}
},
mounted() {
console.log('Component mounted.');
},
computed:{},
data: () => ({
user: {
permissionId: "",
}
}),
methods: {},
}
</script>

然后在你的组件模板中:

<select required v-model="user.permissionId" class="form-control" id="user-permissionId">
<option v-for="permission in permissions" :value="permission.id" :key="permission.id">
{{ permission.id }}
</option>
</select>