Vue js 3 выборка cdn при начальной загрузке страницы

Я использую VueJS 3 (через CDN) для получения списка файлов.

Мой код работает с нажатием кнопки, но я хотел бы изменить его, чтобы он извлекал файлы при начальной загрузке страницы.

<script>
const {
  createApp,
  ref
} = Vue

createApp({
  setup() {
    const files = ref([]);
    function getfiles() {
      const res1 = fetch('/api/files.json')
        .then(response => response.json())
        .then(data => {
          this.requestfiles = data.data.files;
        })
        .catch(error => {
          console.error("There was an error! ", error)
      });
    }
    return {
      getfiles,
      files
    }
  }
}).mount('#app');
</script>

vue.js vuejs3

08.06.2024 21:17

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это один из способов решения задач с использованием подхода CDN.

<script src = "https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id = "app">
  <p v-for = "file in files" :key = "file.id">
- {{ file.title }}
  </p>
</div>

<script>
const {
  createApp,
  ref
} = Vue

createApp({
  setup() {
const files = ref([]);

async function getfiles() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/')
    const result = await response.json()
    files.value = result
  } catch(error) {
    console.error("There was an error! ", error)
  }
}
getfiles()

return {
  getfiles,
  files
}
  }
}).mount('#app');
</script>

Поскольку на данный момент у вас нет большого проекта, вы можете оставить все в части setup, но тогда вы могли бы быть более детализированными и использовать created, mounted и т. д...хуки жизненного цикла.

Спасибо за ответ! это работает для одного элемента, но я бы хотел использовать все элементы массива из jsonplaceholder.typicode.com/todos

— 08.06.2024 22:08

Я обновил его, добавив v-for итерацию с этой страницы документации.

— 08.06.2024 22:14

08.06.2024 21:41