將 Vue.JS 項目轉換為 Nuxt.JS 項目

Question

我想從 Vue.JS 項目創建 Nuxt.JS 項目。

Vue.js項目

您可以在此處查看完整的 Vue.JS 項目。 This project uses npm package vue-conversational-form which can help turn web forms into conversations using Vue.js.

項目有3個文件：

1. 索引.html
2. index.js
3. myForm.js

代碼： index.html

<style>
  html, body {
    height: 90%;
    width: 96%;
    background: #eee;
    margin: 10px auto;
  }
</style>
<div id="app"></div>

代碼： index.js

import Vue from 'vue'
import myForm from './myForm';

new Vue({
  el: '#app',
  template: '<myForm />',
  components: {
    myForm
  }
})

代碼： myForm.js

import Vue from 'vue'
import { ConversationalForm } from 'conversational-form';

export default Vue.component('MyForm', {
  template: '<div class="myForm"></div>',
  styles: [`
    .myForm {
      position: relative;
      height: 100%;
      width: 100%;
    }
  `],
  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 = ConversationalForm.startTheConversation({
        options: {
          submitCallback: this.submitCallback,
          preventAutoFocus: true,
        },
        tags: formFields
      });
      this.$el.appendChild(this.cf.el);
    },
    submitCallback: function () {
      var formDataSerialized = this.cf.getFormData(true);
      console.log("Formdata, obj:", formDataSerialized);
      this.cf.addRobotChatResponse("You are done. Check the dev console for form data output.")
    }
  },
  mounted: function () {
    this.setupForm()
  },
});

Nuxt.js項目

現在在這里您可以看到我嘗試將這個 Vue.Js 項目從codesandbox轉換為 Nuxt.js 項目。

項目有2個文件：

1. index.vue （頁面）
2. MyForm.vue （組件）

代碼： index.vue

<template>
  <div id="app">
    <MyForm></MyForm>
  </div>
</template>

<script>
import MyForm from '~/components/MyForm.vue'

export default {
  components: {
    MyForm
  }
}
</script>

<style scoped>
  html, body {
    height: 90%;
    width: 96%;
    background: #eee;
    margin: 10px auto;
  }
</style>

代碼： MyForm.vue

<template>
  <div class="myForm"></div>
</template>

<script>
export default {
  mounted() {
    this.setupForm()
  },
  methods: {
    setupForm() {
      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?'
        }
      ];

      const { ConversationalForm } = require('conversational-form');

      this.cf = ConversationalForm.startTheConversation({
        options: {
          submitCallback: this.submitCallback,
          preventAutoFocus: true,
        },
        tags: formFields
      });
      this.$el.appendChild(this.cf.el);
    },
    submitCallback() {
      var 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>

<style scoped>
  .myForm {
    position: relative;
    height: 100%;
    width: 100%;
  }
</style>

我在運行 Nuxt.JS 項目時沒有收到任何錯誤，但在瀏覽器 window 中，它顯示的結果與原始 Vue.JS 項目不同。

為什么我在代碼轉換過程中遇到錯誤？ 謝謝！

Answer 1

嘗試使用額外的 div 將.myForm包裝在~/components/MyForm.vue中。 這是一個示例https://codesandbox.io/embed/codesandbox-nuxt-conversational-form-oh9y4

 <template> <div> <div class="myForm"></div> </div> </template>