Javascript 如何在Nuxt Js中的挂载钩子上导入extrenal库？

我在我的nuxt js项目中使用这个包。我在使用这个软件包的地方找到了定制软件

组件代码：

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

更改后错误已修复，但包无法正常工作。当在方法内部调用此库时，

this.cf

numxt js找不到

cf

var。如何解决此问题

---

您还可以在

vue js

中看到此软件包的实时演示。这是一种罕见的情况，您可能需要使用

标记。如果您使用的版本早于2.9.0，则它是

。找到文件

例如：

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

export default { ... }
</script>

从“对话形式”导入*作为cf
导出默认值{…}

这指示Nuxt仅呈现组件客户端，其中定义了窗口

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

export default { ... }
</script>