我正在尝试加载外部 JSON VueJS

Question

我对这一切有些陌生，所以请多多包涵。我正在使用 SurveyJS 从 JSON 文件呈现调查。我可以让它在本地工作，但是当我添加一个组件以将 JSON 加载到一个对象中时，一切都会崩溃。我不确定接下来我需要做什么。我需要加载组件部分的任何内容吗？我是否在组件之间正确传递数据？我很茫然……

这是我的 App.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>


<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

这是我的 router.js：

import Router from 'vue-router'
import SurveyPage from '@/components/SurveyPage'
import newSurvey from '@/components/getNewSurvey.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'SurveyPage',
      component: SurveyPage
    }
  ]
})

这是我的主应用 SurveyPage.vue：

<template>
  <div class="hello">
  
    <div id='surveyElement'>
      <survey :survey="surveyModel"/>
      <div id="surveyResult"></div>
    </div>
    
  </div>
</template>

<script>
import * as SurveyVue from 'survey-vue'
import surveyJSON from '@/assets/survey.json'
import newSurvey from '@/components/getNewSurvey.vue'

let Survey = SurveyVue.Survey

export default {
  name: 'SurveyPage',
  components: {
    Survey
  },
  computed: {
    surveyModel () {
      let survyeModel = new SurveyVue.Model(surveyData)
      survyeModel.onComplete.add(function (result) {
        //document
        //.queryselector('#surveyResult')
        //.textContent = "Result JSON:\n" + JSON.stringify(result.data);

      alert(`result: ${JSON.stringify(result.data)}`)
      })
      
      return survyeModel
    }
  }
  
  
}
</script>

这是我想在呈现调查之前用来加载 JSON 的新组件，名为 getNewSurvey.vue：

<script>
export default {
  name: "newSurvey",
  data() {
    return {
      surveyData: []
    };
  },
  methods: {
    getSurveyData() {
      fetch('http://localhost:8081/survey.json')
        .then(response => response.json())
        .then(data => (this.surveyData = data));
    }
  },
  beforeMount() {
    this.getSurveyData()
  }
};
</script>

这里是 cosole 输出：

**DevTools failed to load SourceMap: Could not load content for chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/contentscript.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/inpage.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
log.js?1afd:24 [HMR] Waiting for update signal from WDS...
vue.runtime.esm.js?2b0e:601 [Vue warn]: Error in render: "ReferenceError: surveyData is not defined"
found in
---> <SurveyPage> at src/components/SurveyPage.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:601
logError @ vue.runtime.esm.js?2b0e:1828
globalHandleError @ vue.runtime.esm.js?2b0e:1823
handleError @ vue.runtime.esm.js?2b0e:1812
Vue._render @ vue.runtime.esm.js?2b0e:4655
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
createChildren @ vue.runtime.esm.js?2b0e:5763
createElm @ vue.runtime.esm.js?2b0e:5664
patch @ vue.runtime.esm.js?2b0e:6187
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
patch @ vue.runtime.esm.js?2b0e:6226
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
eval @ main.js?56d7:12
./src/main.js @ app.js:2460
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:2485
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
Show 10 more frames
vue.runtime.esm.js?2b0e:1832 ReferenceError: surveyData is not defined
    at VueComponent.surveyModel (SurveyPage.vue?8ee1:26)
    at Watcher.get (vue.runtime.esm.js?2b0e:3269)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:3374)
    at VueComponent.computedGetter [as surveyModel] (vue.runtime.esm.js?2b0e:3626)
    at Object.get (vue.runtime.esm.js?2b0e:2025)
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules\\.cache\\vue-loader","cacheIdentifier":"52009d03-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/SurveyPage.vue?vue&type=template&id=2ec8a28e&scoped=true& (app.js:1174), <anonymous>:13:45)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:4653)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:2899)
    at Watcher.get (vue.runtime.esm.js?2b0e:3269)
    at new Watcher (vue.runtime.esm.js?2b0e:3258)
logError @ vue.runtime.esm.js?2b0e:1832
globalHandleError @ vue.runtime.esm.js?2b0e:1823
handleError @ vue.runtime.esm.js?2b0e:1812
Vue._render @ vue.runtime.esm.js?2b0e:4655
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
createChildren @ vue.runtime.esm.js?2b0e:5763
createElm @ vue.runtime.esm.js?2b0e:5664
patch @ vue.runtime.esm.js?2b0e:6187
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
patch @ vue.runtime.esm.js?2b0e:6226
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
eval @ main.js?56d7:12
./src/main.js @ app.js:2460
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:2485
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
Show 9 more frames
inpage.js:1 MetaMask: MetaMask will soon stop reloading pages on network change.
For more information, see: https://docs.metamask.io/guide/ethereum-provider.html#ethereum-autorefreshonnetworkchange 
Set 'ethereum.autoRefreshOnNetworkChange' to 'false' to silence this warning.
(anonymous) @ inpage.js:1
setTimeout (async)
t.exports @ inpage.js:1
initProvider @ inpage.js:1
(anonymous) @ inpage.js:1
1../lib/setupWeb3 @ inpage.js:1
i @ inpage.js:1
e @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ contentscript.js:1
1.@babel/runtime/helpers/interopRequireDefault @ contentscript.js:1
i @ contentscript.js:1
e @ contentscript.js:1
(anonymous) @ contentscript.js:1

Answer 1

你的箭头函数没有很好定义，因为你将使用函数直接范围之外的变量，你应该定义它的主体，它不能像response => response.json()那样内联，那么你应该这样写

getSurveyData() {
  fetch('http://localhost:8081/survey.json')
    .then(response => response.json())
    .then(data => {
        this.surveyData = data
    }
  );
}