Как импортировать внешнюю библиотеку на смонтированном хуке в Nuxt Js? - PullRequest
Новая
       43

Как импортировать внешнюю библиотеку на смонтированном хуке в Nuxt Js?

0 голосов
/ 17 октября 2019

Я использую форму беседы пакет в моем проекте Nuxt JS. Я нашел пользовательский компонент из github , где использовался этот пакет.

Код компонента: 

<template>
  <form id="my-form-element" cf-form></form>
</template>

<script>
import * as cf from 'conversational-form'

export default {
  mounted: function() {
    this.setupForm()
  },
  methods: {
    setupForm: function() {
      const formFields = [
        {
          tag: 'input',
          type: 'text',
          name: 'firstname',
          'cf-questions': 'What is your firstname?'
        },
        {
          tag: 'input',
          type: 'text',
          name: 'lastname',
          'cf-questions': 'What is your lastname?'
        }
      ]

      this.cf = cf.startTheConversation({
        options: {
          submitCallback: this.submitCallback
        },
        tags: formFields
      })
      this.$el.appendChild(this.cf.formEl)
    },
    submitCallback: function() {
      const formDataSerialized = this.cf.getFormData(true)
      console.log('Formdata, obj:', formDataSerialized)
      this.cf.addRobotChatResponse(
        'You are done. Check the dev console for form data output.'
      )
    }
  }
}
</script>

Теперь при использовании этого компонента появляется сообщение об ошибке:

окно не определено

В качестве решения этой ошибки рекомендуется ответ от stackowerflow

И после просмотра этого ответаЯ изменил код компонента.

Изменения:

1.Удалено import * as cf from 'conversational-form'

2.Заменено mounted() перехватить содержимое для: 

var cf = require('conversational-form')
this.setupForm()

После изменений исправлена ​​ошибка, но пакет работал некорректно. При вызове этой библиотеки внутри методов как this.cf nuxt js не может быть найден cf var. Как я могу решить эту проблему?

Также вы можете увидеть живую демонстрацию этого пакета в vue js здесь

1 Ответ

0 голосов
/ 17 октября 2019

Это редкая ситуация, когда вам может понадобиться использовать тег <client-only>. Если вы используете версию старше 2.9.0, то это <no-ssr>. Документы найдены здесь .

Пример: 

<template>
  <client-only>
    <form id="my-form-element" cf-form></form>
  </client-only>
</template>
<script>
import * as cf from 'conversational-form'

export default { ... }
</script>

Это указывает Nuxt только на визуализацию клиентской части компонента, где определено окно.

...