@Soer44

Почему не работает v-model?

Подскажите пожалуйста, что тут не так??? По идее value трекается через v-model. Однако даже в консоль выпадает результат null. На сервер уходит null и его не пускает валидация.
Отправка данных через useFetch.

<template>
	<div>
		<h4>Добавление новой книги</h4>
		<form @submit.prevent="submitForm">
			<div>
				<label for="upload_cover">Обложка:</label>
				<input type="file" id="upload_cover" name="upload_cover" v-on:change="formData.upload_cover" />
			</div>

			<div>
				<label for="title">Заголовок:</label>
				<input type="text" id="title" name="title" v-model="formData.title" />
			</div>

			<div>
				<label for="published_year">Год публикации:</label>
				<input type="number" id="published_year" name="published_year" v-model="formData.published_year" />
			</div>
			<button type="submit">Отправить</button>
		</form>
	</div>
</template>


<script setup lang="ts">
import { ref } from 'vue';


const formData = ref({
	upload_cover: null as File | null,
	title: '',
	published_year: 1999,



});

const submitForm = async () => {
    const { data: responseData } = await useFetch('https://api.storage/api/v1/books', {
        method: 'POST',
        body: { 
          upload_cover: formData.value.upload_cover,
          title: formData.value.title,
          published_year: formData.value.published_year, 
        }
    })

    console.log(responseData.value)
}


</script>
  • Вопрос задан
  • 238 просмотров
Решения вопроса 1
@Soer44 Автор вопроса
Вопрос был поставлен изначально не корректно. Мне надо было методом useFetch передать данные на сервер апи. Чтобы данные там записались. Формат и валидацию определяет бэкенд. Ниже скину пример с передачей текстовых данных. Передачу файла так и не победили, пока. Проблема была с бэкендом. Что то там дописали переписали и заработало. Передаётся без заголовков.

<template>
  <div>
    <h4>Добавление новой категории</h4>
    <form>
      <div>
        <label for="title">Добавить тег:</label>
        <input type="text" id="name" v-model="name" />
      </div>
      <button @click.prevent="handleSubmit">Отправить</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const name = ref("");

const handleSubmit = async () => {
  await useFetch("https://api.storage/api/", {
    method: "post",
    body: {
      name: name.value,
    },
  });
};
</script>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@KonstantinDyulin
А почему вы event на div повесили?
Могу предположить что дело в этом, просто банально форма не обрабатывается, так как event висит не на теге form.
И я не навязываю, так обычный совет, если у вас SPA приложение, то использование тега form пожалуй излишне, так как вы обрабатываете отправку вручную в своем методе. Если хотите использовать в целях семантики, то можете просто повесить event click на кнопку который будет запускать ваш метод отправки формы
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы