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>

这是 insert-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>

如何使用 Vue 和 Laravel 避免警告“直接改变道具”

1 个答案: