Nuxt：添加外部资源的问题

如何解决Nuxt：添加外部资源的问题

我正在尝试向Nuxt项目添加Survey.js调查。我正在按照the official documentation

添加外部资源

<template>
  <div class="container">
    <div id="surveyContainer"><survey :survey="survey"></survey></div>
  </div>
</template>

<script>

export default {
  head() {
    return {
      script: [
        {
          src: "https://surveyjs.azureedge.net/1.7.27/survey.vue.min.js"
        }
      ],link: [
        {
          rel: "stylesheet",href: "https://surveyjs.azureedge.net/1.7.27/survey.css"
        }
      ]
    };
  },mounted() {
    var surveyJSON = { /* json data */   };

    function sendDataToServer(survey) {
      //send Ajax request to your web server.
      alert("The results are:" + JSON.stringify(survey.data));
    }

    var survey = new Survey.Model(surveyJSON);
    new Vue({ el: "#surveyContainer",data: { survey: survey } });
  }
};
</script>

这给了我

ReferenceError：未定义调查

因此，似乎head（）中包含的js在mount（）中不可用。我是Nuxt和Survey.js的新手，所以不确定。有谁可以帮助您？

解决方法

工作版本：

<template>
    <div id="surveyContainer"><survey :survey="survey"></survey></div>
</template>

<script>
import * as SurveyVue from "survey-vue";

export default {
  head() {},data() {
    var surveyJSON = {
 "pages": [
  //  survey content
 ]
};

    var model = new SurveyVue.Model(surveyJSON);

    return {
      survey: model,};
  },methods: {
    sendDataToServer(survey) {
      //send Ajax request to your web server.
      alert("The results are:" + JSON.stringify(survey.data));
    }
  }
};
</script>

问题不是关于如何包含外部资源，而是我想将“香草” Vue和Nuxt代码混合在一起（两者都不是专家）

new Vue({ el: "#surveyContainer",data: { survey: survey } });