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

Question

[Soer44]

Подскажите пожалуйста, что тут не так??? По идее 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>

Comments

[Rsa97]

v-on:change="formData.upload_cover"

Что вы этим хотели сказать? В v-on:change должна быть функция, вызываемая при изменении поля.

[Soer44]

Rsa97, Это относительно новая фишка nuxt, метод useFetch.

[Вадим]

Soer44, у Вас как функция обработчик события change стоит

formData = ref({ upload_cover: null as File | null,

- точно какая то относительно новая функция nuxt?

[Soer44]

Вадим, не уверен всё ли правильно. задача с помощью useFetch передать данные на сервер. код брал из примера, у чувака всё работает, проблема в том что я делаю вроде всё так же, а у меня не работает.

[Rsa97]

Soer44, А какое отношение useFetch имеет к v-on:change?

[Soer44]

Rsa97, никакое. вопрос комплексный. v-on:change в моём представлении должен работать как v-model. Справедливости ради, скажу что и v-model в данном примере не работает. Значения он не трекает и не передаёт.

[Rsa97]

Soer44, Неправильное у вас представление.
v-on (или @) подключает обработчик события и никакого отношения к v-model не имеет.

[Soer44]

Rsa97, да вы я посмотрю эксперт! Отвечу вам в вашем же стиле. <div> </div> это блок в который можно поместить элементы!
Вопрос был не об этом. Если не разбираетесь в чём то, не надо флудить своими глубочайшими познаниями.

[KonstantinDyulin]

Soer44, Я окончательно запутался(так как пытаюсь искать проблему сразу везде). Давайте заново. Свойства привязываются к полю или нет? И какое конкретно свойство отправляется нулевым, все или только одно?

[KonstantinDyulin]

Soer44, Null в консоль выводится потому что вы пытаетесь вывести ответ запроса который вы делаете, а в этом эндпоинте api скорее всего не предусмотрен ответ, вот null и выводится в консоль. Вы лучше проверьте свойства которые вы привязали к полям(перед отправкой на сервер), и тело запроса во вкладке сеть(если браузер на русском, там же где консоль смотрите)(проверьте идет ли вообще запрос, и на правильный ли эедпоинт он идет).

[Soer44]

KonstantinDyulin, Там всё нормально привязано было. На апи какая хрень творилась, проблему обнаружили, но до сих пор не решили. Сейчас занимаются решают. Мой вопрос был поставлен не корректно. Отдельный коментом ответ сейчас скину.

Answer 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>

Answer 2

[KonstantinDyulin]

А почему вы event на div повесили?
Могу предположить что дело в этом, просто банально форма не обрабатывается, так как event висит не на теге form.
И я не навязываю, так обычный совет, если у вас SPA приложение, то использование тега form пожалуй излишне, так как вы обрабатываете отправку вручную в своем методе. Если хотите использовать в целях семантики, то можете просто повесить event click на кнопку который будет запускать ваш метод отправки формы

Comments

[Soer44]

Очень точно подметили, за это отдельное спасибо. Однако, к сожалению это не поменяло ситуацию. На сервер сигнал идёт, от него приходит ответ что запрос пустой. В консоли null. Реактивные текстовые переменные трекаются через v-model, но данные в в запрос не записываются.

[KonstantinDyulin]

а вы уверенны в том что правильно забиваете тело запроса, меня к примеру смущает что в свойство запроса email, вы прокидываете title книги. Может проблема как раз таки в этом, вы не забиваете нужные свойства, вот они и нулевые

[Soer44]

KonstantinDyulin, вы внимательный человек! Однако этот момент я ещё вчера пофиксил, сейчас исправлю в вопросе. Однако и с фиксом не работает.