Fatal编程技术网
  • javascript/
  • Javascript 我正在尝试加载外部JSON VueJS

Javascript 我正在尝试加载外部JSON VueJS

javascript vue.js

Javascript 我正在尝试加载外部JSON VueJS,javascript,vue.js,Javascript,Vue.js,我对这一切有些陌生，所以请容忍我。我正在使用SurveyJS从JSON文件呈现调查。我可以让它在本地工作，但当我添加一个组件将JSON加载到一个对象中时，一切都崩溃了。我不确定下一步我需要做什么。我需要加载组件部分中的任何内容吗？我是否在组件之间正确传递数据？我不知所措 这是我的App.vue： <template> <div id="app"> <img src="./assets/logo.png">

我对这一切有些陌生，所以请容忍我。我正在使用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>
以下是我的主要应用程序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>


从“survey vue”导入*作为SurveyVue
从“@/assets/survey.json”导入surveyJSON
从“@/components/getNewSurvey.vue”导入newSurvey
let Survey=SurveyVue.Survey
导出默认值{
名称：“SurveyPage”，
组成部分：{
调查
},
计算：{
surveyModel（）{
让SurvyModel=新建SurveyVue.Model（surveyData）
survyeModel.onComplete.add（函数（结果）{
//文件
//.queryselector（“#surveyResult”）
//.textContent=“Result JSON:\n”+JSON.stringify（Result.data）；
警报（`result:${JSON.stringify（result.data）}`）
})
返回survyeModel
}
}
}
下面是一个新组件，我想在呈现名为getNewSurvey.vue的调查之前使用它加载JSON：




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


导出默认值{
名称：“新闻调查”，
数据（）{
返回{
调查数据：[]
};
},
方法：{
getSurveyData（）{
取（'http://localhost:8081/survey.json')
.then（response=>response.json（））
.然后（data=>（this.surveyData=data））；
}
},
beforeMount（）{
这是getSurveyData（）
}
};
以下是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

**DevTools未能加载SourceMap:无法加载chrome的内容-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/contentscript.js.map: HTTP错误：状态代码404，net:：ERR\u未知\u URL\u方案
DevTools未能加载SourceMap:无法加载chrome的内容-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/inpage.js.map: HTTP错误：状态代码404，net:：ERR\u未知\u URL\u方案
log.js？1afd:24[HMR]正在等待来自WDS的更新信号。。。
vue.runtime.esm.js？2b0e:601[vue warn]：渲染中出错：“ReferenceError:surveyData未定义”
发现于
--->位于src/components/SurveyPage.vue
在src/App.vue
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
获取@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
补丁@vue.runtime.esm.js？2b0e:6187
Vue._update@Vue.runtime.esm.js？2b0e:2778
updateComponent@vue.runtime.esm.js？2b0e:2899
获取@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
补丁@vue.runtime.esm.js？2b0e:6226
Vue._update@Vue.runtime.esm.js？2b0e:2778
updateComponent@vue.runtime.esm.js？2b0e:2899
获取@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
（匿名）@app.js:791
（匿名）@app.js:794
再显示10帧
vue.runtime.esm.js？2b0e:1832引用错误：未定义surveyData
位于VueComponent.surveyModel（SurveyPage.vue？8ee1:26）
at Watcher.get（vue.runtime.esm.js？2b0e:3269）
在Watcher.evaluate（vue.runtime.esm.js？2b0e:3374）
位于VueComponent.computedGetter[作为surveyModel]（vue.runtime.esm.js？2b0e:3626）
at Object.get（vue.runtime.esm.js？2b0e:2025）
在Proxy.render（eval at./node_modules/cache loader/dist/cjs？{“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），：13:45）
在VueComponent.Vue._渲染（Vue.runtime.esm.js？2b0e:4653）
位于VueComponent.updateComponent（vue.runtime.esm.js？2b0e:2899）
at Watcher.get（vue.runtime.esm.js？2b0e:3269）
在新的观察者（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
获取@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
补丁@vue.runtime.esm.js？2b0e:6187
Vue._update@Vue.runtime.esm.js？2b0e:2778
updateComponent@vue.runtime.esm.js？2b0e:2899
获取@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
补丁@vue.runtime.esm.js？2b0e:6226
Vue._update@Vue.runtime.esm.js？2b0e:2778
updateCo

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