vue.js - Nuxt：添加外部资源的问题

Question

我正在尝试将 Survey.js 调查添加到 Nuxt 项目。我正在根据官方文档添加外部资源

<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 的新手，所以我不确定。有谁能帮忙吗？

Answer 1

工作版本：

<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 } });