laravel Uncaught(in promise)ReferenceError：$page未定义

ycggw6v2 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(95)

我想实现的目标

我有一个使用Laravel + InertiaJS/VueJS 3的项目。在其中，有一个编辑表单，如果值不为空，则应该显示$page.props.profile_name的内容，如果值不存在，则应该显示字符串profile_name。

浏览器控制台的bug消息

Uncaught（in promise）ReferenceError：$page未定义
当我看到此消息时，我的组件的内容在界面中不可见。

我的VueJS 3代码

<template>
    <form @submit.prevent="submit">
        <input id="profile_name" v-model="form.profile_name" />

        <input id="description" v-model="form.description" />

        <button type="submit">Submit</button>
    </form>
</template>

<script setup>
    import { useForm } from '@inertiajs/vue3';
    import { router } from '@inertiajs/vue3';

    const form = useForm({
        profile_name: $page.props.profile_name || 'profile_name',
        description: $page.props.description || 'description',
    });

    function submit() {
        router.post('/members', form);
    }
</script>

目前如何解决问题

代码运行良好，但使用硬编码内容，如果我以这种方式替换形式常量。我更希望在$page.props.profile_name不为空时从$page.props.profile_name获取我的内容。

const form = useForm({
    profile_name: 'profile_name',
    description: 'description',
});

laravel

来源：https://stackoverflow.com/questions/76451869/uncaught-in-promise-referenceerror-page-is-not-defined

2条答案

按热度按时间

kcugc4gi1#

我最初在问题中发布了答案，但它被校对员删除了。感谢yoduh的回答。感谢efecdml参与讨论。

<template>
    <form @submit.prevent="submit">
        <input id="profile_name" :placeholder="$page.props.profile_name || 'profile_name'" v-model="form.profile_name" />

        <input id="description" :placeholder="$page.props.description || 'description'" v-model="form.description" />

        <button type="submit">Submit</button>
    </form>
</template>

<script>
    import { useForm } from '@inertiajs/vue3';
    import { router } from '@inertiajs/vue3';
    import { usePage } from '@inertiajs/vue3';

    export default {
        name: 'MyComponent',
        setup() {
            const page = usePage();

            const form = useForm({
                profile_name: page.props.profile_name || 'profile_name',
                description: page.props.description || 'description',
            });

            function submit() {
                router.post('/members', form);
            }

            return {
                form,
                submit,
            };
        },
    };
</script>

赞(0）回复(0）举报 2023-06-25

hmae6n7t2#

我知道像引用元素从DOM到设置是不像Composition API，没有得到这段代码的全部要点。这就是我现在想到的方法：

<template>
  <form @submit.prevent="submit">
    <input id="profile_name" v-model="form.profile_name"/>

    <input id="description" v-model="form.description"/>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { router } from '@inertiajs/vue3';
import {ref} from "vue";

const form = ref({
  "profile_name":"",
  "description":""
})

function submit() {
  router.post('/members', form);
}
</script>

我现在没有得到submit()方法。

赞(0）回复(0）举报 2023-06-25

我来回答

laravel Uncaught(in promise)ReferenceError：$page未定义

我想实现的目标

浏览器控制台的bug消息

我的VueJS 3代码

目前如何解决问题

2条答案

相关问题

热门标签

最新问答