使用VueJS时无法挂载组件

时间:2018-09-13 17:53:58

标签: javascript html vue.js

我正在尝试将vue2-editor用于我的项目,但无法正常工作。它说:“无法装入组件:模板或渲染函数未定义。”当我尝试使用import而不是require时,出现错误消息:“找不到模块的声明文件...”。我已经设置了一个types.d.ts来解决这个问题,但仍然行不通。

感谢您的帮助!

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import PopupImages from "./PopupImages.vue";
import VModal from 'vue-js-modal';
import UploadFile from "./UploadFile.vue";
import axios from 'axios';
import router from "../router";
import store from "../store";
const VueEditor = require('vue2-editor').default;

class Route {
  name: string;
  description: string;
  constructor(){
    this.name = "";
    this.description = "";
    console.log(VueEditor);
  }
}

Vue.use(VModal,  { dynamic: true });

@Component({
  components: {
    VModal,
    UploadFile,
    VueEditor
  }
})

export default class NewRoute extends Vue {
  route: Route;
  content: any;
  constructor(){
    super();
    this.route = new Route();
    this.content = '<h1> Testing </h1>';
  }
  sendData(){
    let newRoute = {
      name : this.route.name,
      description : this.route.description
    }
    console.log(newRoute);
    axios.get('')
    .then((response) => {
      console.log(response);
    })
    .catch((error: any) => {
      console.log(error);
    })
  }
}
</script>
<template>
    <div id="newRoute">
      <vue-editor v-model="content"></vue-editor>
      <modal name="addRoute" :width="400" :height="450">
      <form>
        <h1>Insert new trail</h1>
        <p>
          <label for ="route">Route name</label>
          <input type = "text" id="route" name ="route" v-model="route.name" size = "30" maxlength ="30" required/>
        </p>
        <p>
            <label for = "description">Description</label>
            <textarea id= "description" name = "description" v-model="route.description">
            </textarea>
        </p>
        <p>Upload JSON or GPX file</p>
        <UploadFile></UploadFile>
        <br/>
        <button type="submit" @click ="sendData">Submit</button>
      </form>
    </modal>
    </div>
</template>

0 个答案:

没有答案