Inertiajs - используйте компонент Link для добавления записи, но не можете очистить текстовое поле без использования формы
У меня есть простой тег textarea на странице с компонентом инерционной ссылки, оформленным в виде кнопки для добавления содержимого textarea в базу данных.
<script setup>
import { ref } from "vue";
let noteToAdd = ref('');
</script>
...
<template>
<textarea v-model = "noteToAdd"></textarea>
<Link
:href = "route('notes.store')"
method = "post"
as = "button"
:data = "{'note': noteToAdd, 'user_id': user.id }"
>
Add Note
</Link>
...
</template>
Метод хранилища NoteController просто проверяет содержимое текстовой области, а затем запускает для него метод создания.
namespace App\Http\Controllers;
use Illuminate\Support\Facades\Request;
use Inertia\Inertia;
class NoteController extends Controller;
...
public function store()
{
$attributes = Request::validate([
'note' => ['required', 'min:3'],
'user_id' => 'required',
]);
Note::create($attributes);
}
Все работает по плану. Содержимое заметки корректно добавляется в базу данных. Однако я не могу понять, как сбросить или очистить текстовое поле при успешном добавлении в базу данных без использования формы.
Это может показаться простым, и я, вероятно, просто слишком много думаю об этом, но все, что я вижу в документации, требует формы, а затем очистки содержимого (или отдельных полей) формы. Установка свойства v-model = '' тоже не работает?
Можно ли это сделать без формы? Если да, то как и лучше всего обрабатывать это в контроллере, в компоненте ссылки или в другом месте?
Я могу заставить это работать с помощью формы, однако я хотел бы сделать это без формы, чтобы упростить код.
Ответы 1
Я создал пример на Vue SFC playground. Вы можете увидеть это здесь.
В этом примере не используется Laravel Inertia; однако концепция должна по-прежнему применяться. В вашем примере inertia/link будет использовать @onClick вместо @click, если я правильно помню.
Использование инерции
Если вы не можете использовать @onClick или @click, как показано в приведенном выше примере на inertia/link, тогда другим вариантом является добавление события маршрутизатора :
import { ref } from 'vue'
import { router } from '@inertiajs/vue3'
const noteToAdd = ref('This is here on pageload.')
const clearTextarea = () => {
noteToAdd .value = ''
};
router.on('success', clearTextarea)
<template>
<textarea v-model = "noteToAdd"></textarea>
<Link
:href = "route('notes.store')"
method = "post"
as = "button"
:data = "{'note': noteToAdd, 'user_id': user.id }"
>
Add Note
</Link>
</template>
Этот код не проверен.
Однако мое личное мнение таково, что лучше всего использовать форму Inertia. Это было бы наилучшей практикой, независимо от того, будет ли код больше/меньше, чем без формы.
Спасибо, надеюсь, это поможет.