Как получить данные JSON в Vue SPA? - PullRequest
Новая
       14

Как получить данные JSON в Vue SPA?

0 голосов
/ 28 сентября 2018

Я создал образец приложения Vue через @vue/cli 3.0: 

vue create testapp
cd testapp
npm run serve

Как часть mounted(), я хотел fetch некоторые локальные данные: 

fetch("users.json")
   .then(r => r.json())
   .then(r => this.users = r.hits.hits.map(x => x._source))

где users определено в data().

Ответ: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>example.com</title>
  <link href="/about.js" rel="prefetch"><link href="/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but example.com doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

Я попытался переместить файл JSON в static в корне приложения (в то же времяУровень как src, затем в assets, а затем везде, где я мог придумать - ответ всегда тот, из приложения, который предполагает, что это запрос содержимого HTML / JS / CSS, а не необработанных данных.

Где разместить такой статический файл?

1 Ответ

0 голосов
/ 28 сентября 2018

Вы можете назначить JSON в ваши данные в начале, попробуйте это в вашем App.vue

<template>
    <div>
        <div v-for="user in users">{{user}}</div>
    </div>
</template>
<script>
    import json from './users.json'
    export default{
        data(){
           return{
              users: json
            }
        }
    }
</script>

А также убедитесь, что ваш main.js имеет импорт App.vue

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Найдите свой users.json на том же уровне, что и src (то же самое с App.vue), это хорошо.

Надеюсь, это может помочь вам!Приветствия

...