Я пытаюсь использовать 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.info(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.info(newRoute);
axios.get('')
.then((response) => {
console.info(response);
})
.catch((error: any) => {
console.info(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>
Экспорт по умолчанию в этой библиотеке - это PluginObject
, а не фактический VueEditor
, поэтому вам нужно изменить его на именованный экспорт. github.com/davidroyer/vue2-editor/blob/master/src/index.js
Я не вижу .mount()
в вашем фрагменте кода. Угадайте, что это то, что вызывает ошибку .. и я не знаю TS.
Попробуйте импортировать его так:
import { VueEditor } from 'vue2-editor'