代码之家 › 专栏 › 技术社区 › erlango3

未捕获(承诺中)ReferenceError:$page未定义

inertiajs vuejs3 laravel

erlango3 · 技术社区 · 3 年前

我想要实现的目标

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

来自浏览器控制台的错误消息

未捕获(承诺中)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.prop.profile_name 一旦 $page.prop.profile_name 不是空的。

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

1 回复 | 直到 3 年前

erlango3 3 年前

我最初在问题中发布了答案,但被校对人员删除了。感谢尤杜的回答。感谢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>

efecdml 3 年前

我知道从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() 方法。