所选属性在InertiaJS中不起作用

Question

我到处寻找解决这个问题的方法，但是我找不到任何关于它的信息。我有一个带有动态选项和表单的普通选择HTML标记。我所需要的是默认情况下显示最新创建的类别作为选中的选项，所以我用orderByDesc从laravel传递选项，我可以看到，当我单击下拉列表时，它会显示顶部的最新选项，但在默认情况下它不会显示任何值，这意味着所选的属性不起作用。

web.php

'categories' => auth()->user() ?
            category::where('user_id', auth()->user()->id)->orderByDesc('created_at')->get()
            : []

frontend

<select
                        name="category_id"
                        id="category_id"
                        class="min-w-max text-sm text-gray-900 bg-transparent border-2 rounded-xl"
                        v-model="productForm.category_id"
                    >
                        <option
                            v-for="category in categories"
                            :key="category.id"
                            :value="category.id"
                            selected
                        >
                            {{ category.name }}
                        </option>
                    </select>

the form

const productForm = useForm("createProduct", {
    category_id: null,
    categName: null,
    title: null,
    price: null,
    type: null,
    currency: null,
    desc: null,
    qty: null,
    thumbnail: null,
});

如果有更好的方法使用InertiaJS选择菜单，我将非常感谢您的帮助

Answer 1

在使用Inertia.js时，可以在表单本身上设置默认值。因为我们使用v模型将输入值传递给表单，所以在表单本身上设置默认值。

const productForm = useForm("createProduct", {
    category_id: 1,
});

这将在默认情况下将选定的值设置为“1”。