Блог

Главная - Вопросы по программированию - Nuxt: проблема с добавлением внешних ресурсов

Nuxt: проблема с добавлением внешних ресурсов

#vue.js #nuxt.js #surveyjs

#vue.js #nuxt.js #surveyjs

Вопрос:

Я пытаюсь добавить 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>

Это дает мне:

Ошибка ссылки: опрос не определен

Похоже, каким-то образом js, включенный в head (), недоступен в mounted(). Я новичок как в Nuxt, так и Survey.js , так что я не уверен. Кто-нибудь, кто может помочь?

Комментарии:

1. Почему вы не добавляете опрос как пакет? npm install survey-vue а затем импортировать, чтобы использовать его

2. Спасибо, сначала я тоже попробовал это, но это выдает мне «Не удается прочитать свойство ‘css’ undefined» из-за некоторых зависимостей. Полагаю, jQuery и Bootstrap, но даже после их добавления я не смог избавиться от ошибки. Могут быть и другие обходные пути, например, сохранение js локально и его импорт, но я хотел бы знать, почему мое решение не работает..

Ответ №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 } });