LINUX.ORG.RU

vuejs api данные не выводятся

 , , ,


0

1

Что-то ни как не выводятся данные

в логах api сервера запросы есть.

Подскажите как правильно скрипт сделать??

<script setup>
import axios from 'axios'
async function addTodo() {
  try {
    const response = await axios.get('http://192.168.1.100:8000/items/ ')
    console.log(response.data) // Получили добавленный объект
  } catch (error) {
    console.error('Ошибка добавления задачи:', error)
  }
}
</script>
<template>
<div>{{ addTodo }}</div>
</template>

он мне просто текст этой функций выводит

Если просто кнопку делаю

 <div @click.capture="addTodo">...</div> 

не чего не выводит

что не правильно делаю?

Ответ на: комментарий от antonio-an

Ну так замени одну строчку. А вообще почитай базу по Vue, тебе необходимо использовать реактивный response и именно его добавлять в шаблон, кроме того тебе надо сказать компоненту, что-бы он при монтировании обращался к api через watch или watchEffect. Опять же это в всё описано в начальном гайде «step-by-step».

itn ★★★
()
Ответ на: комментарий от itn

Ну так замени одну строчку. А вообще почитай базу по Vue, тебе необходимо использовать реактивный response и именно его добавлять в шаблон, кроме того тебе надо сказать компоненту, что-бы он при монтировании обращался к api черезwatchилиwatchEffect. Опять же это в всё описано в начальном гайде «step-by-step».

одной строчкой там точно не обойтись.

antonio-an
() автор топика
Ответ на: комментарий от hippi90
<div>{{ addTodo () }}</div>

Использовать```

Выводится «[object Promise]»

   <button @click.capture="addTodo()">Legacy</button> 

кнопка есть при нажатие в логе api идут запросы - но данные на фронте не выводятся.

antonio-an
() автор топика
Последнее исправление: antonio-an (всего исправлений: 2)
Ответ на: комментарий от antonio-an

Ты бу уже давно прочитал про реактивность и жизненный цикл… 🤦

<script setup>
import {
  ref,
  onMounted,
} from 'vue';
import axios from 'axios';

const response = ref(null);

async function addTodo() {
  try {
    response.value = await axios.get('http://192.168.1.100:8000/items/');
    console.log(response.value);
  } catch (error) {
    console.error('Ошибка добавления задачи:', error);
  }
}

onMounted(addTodo);
</script>

<template>
<div v-if="response">{{ response }}</div>
</template>
itn ★★★
()
Ответ на: комментарий от itn

Ты бу уже давно прочитал про реактивность и жизненный цикл… 🤦

<script setup>
import {
 ref,
 onMounted,
} from 'vue';
import axios from 'axios';

const response = ref(null);

async function addTodo() {
 try {
   response.value = await axios.get('http://192.168.1.100:8000/items/');
   console.log(response.value);
 } catch (error) {
   console.error('Ошибка добавления задачи:', error);
 }
}

onMounted(addTodo);
</script>

<template>
<div v-if="response">{{ response }}</div>
</template>

Пустой div данных нет.

в логах api запрос есть

antonio-an
() автор топика
Ответ на: комментарий от itn

Значит у тебя данных нет) Смотри в инспекторе, что в ответе приходит. Тут уже мои полномочия всё. Читай документацию и гайды.

там CORSMiddleware не пропускает

Сейчас политику настрою и заработает!

antonio-an
() автор топика
Ответ на: комментарий от itn

Значит у тебя данных нет) Смотри в инспекторе, что в ответе приходит. Тут уже мои полномочия всё. Читай документацию и гайды.

Заработало.

Теперь осталось понять каки эти сырые данные правильно выводить

{ "data": { "message": "Hello World" }, "status": 200, "statusText": "OK", "headers": { "content-length": "25", "content-type": "application/json" }, "config": { "transitional": { "silentJSONParsing": true, "forcedJSONParsing": true, "clarifyTimeoutError": false }, "adapter": [ "xhr", "http", "fetch" ], "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "maxBodyLength": -1, "env": {}, "headers": { "Accept": "application/json, text/plain, */*" }, "method": "get", "url": "http://192.168.1.100:8000/", "allowAbsoluteUrls": true }, "request": "[object XMLHttpRequest]" }......
antonio-an
() автор топика