我在使用vue.js时是新手，我正在尝试使用Vuetify来创建管理网站，我想制作一个需要WYWSIYG编辑器的促销页面，但是当我想尝试使用{{1 }}在尝试使用API进行发布之前，我无法从羽毛笔编辑器中获取任何内容，但是当我使用普通的console.log()
我想要得到的是所有这些的价值：
<v-text-field>测试数据标题：测试促销
console.log("Test Data Title : ", this.title)
测试数据开始日期：2019-02-12
console.log("Test Data Start Date : ", this.startDate)
测试数据开始时间：02：30
console.log("Test Data Start Time: ", this.startTime)
测试数据结束日期：2019-02-28
console.log("Test Data End Date : ", this.endDate)
测试数据结束时间：05：30
console.log("Test Data End Time : ", this.endTime)
测试数据编辑器的数据：未定义->无法实现
这是我的 TambahkanPromosi.vue 的代码：
console.log("Test Data Editor's data : ", this.editor)
这是我的 Editors.vue ：
<template>
<v-card>
<v-card-text>
<v-form v-model="valid" ref="form" id="tambahkan-promosi" lazy-validation>
<v-layout row wrap>
<v-flex lg12 sm12>
<v-text-field label="Nama Promosi" name="title" v-model="title">
</v-text-field>
</v-flex>
<v-flex sm6 lg6>
<v-menu
class="pr-2"
ref="statDate"
lazy
:close-on-content-click="false"
v-model="startDateMenu"
transition="scale-transition"
offset-y
full-width
:nudge-bottom="-22"
max-width="290px"
:return-value.sync="startDate"
>
<v-text-field
slot="activator"
label="Tanggal Mulai"
v-model="startDate"
append-icon="event"
readonly
></v-text-field>
<v-date-picker v-model="startDate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="startDateMenu = false">Cancel</v-btn>
<v-btn flat color="primary" @click="$refs.statDate.save(startDate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-flex>
<v-flex sm6 lg6>
<v-menu
ref="startTime"
lazy
:close-on-content-click="false"
v-model="startTimeMenu"
transition="scale-transition"
offset-y
full-width
:nudge-bottom="-24"
max-width="290px"
:return-value.sync="startTime"
>
<v-text-field
slot="activator"
label="Waktu Dimulai"
v-model="startTime"
append-icon="access_time"
readonly
></v-text-field>
<v-time-picker v-model="startTime">
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="startTimeMenu = false">Cancel</v-btn>
<v-btn flat color="primary" @click="$refs.startTime.save(startTime)">OK</v-btn>
</v-time-picker>
</v-menu>
</v-flex>
<v-flex sm6 lg6>
<v-menu
ref="endDate"
lazy
class="pr-2"
:close-on-content-click="false"
v-model="endDateMenu"
transition="scale-transition"
offset-y
full-width
:nudge-bottom="-22"
min-width="290px"
:return-value.sync="endDate"
>
<v-text-field
slot="activator"
label="Tanggal Berakhir"
v-model="endDate"
append-icon="event"
readonly
></v-text-field>
<v-date-picker v-model="endDate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="endDateMenu = false">Cancel</v-btn>
<v-btn flat color="primary" @click="$refs.endDate.save(endDate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-flex>
<v-flex sm6 lg6>
<v-menu
ref="endTime"
lazy
:close-on-content-click="false"
v-model="endTimeMenu"
transition="scale-transition"
offset-y
full-width
:nudge-bottom="-24"
max-width="290px"
:return-value.sync="endTime"
>
<v-text-field
slot="activator"
label="Waktu Berakhir"
v-model="endTime"
append-icon="access_time"
readonly
></v-text-field>
<v-time-picker v-model="endTime" >
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="endTimeMenu = false">Cancel</v-btn>
<v-btn flat color="primary" @click="$refs.endTime.save(endTime)">OK</v-btn>
</v-time-picker>
</v-menu>
</v-flex>
<v-flex lg12 sm12>
<editors v-model="editor"></editors>
</v-flex>
<v-spacer></v-spacer>
</v-layout>
</v-form>
</v-card-text>
<v-card-actions class="pb-3">
<v-spacer></v-spacer>
<v-btn color="primary" form="tambahkan-promosi" @click="getQuill()">Tambahkan Promosi</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
import Editors from '@/components/promosi/Editors'
export default {
components: {
Editors
},
props: ['editor'],
data: () => ({
title: null,
valid: true,
date: null,
startDateMenu: false,
startDate: null,
startTimeMenu: false,
startTime: null,
endDateMenu: false,
endDate: null,
endTimeMenu: false,
endTime: null,
modal: false,
editor: null
}),
methods: {
closeDialog () {
this.$parent.isActive = false;
},
getQuill (){
console.log("Test Data Title : ", this.title)
console.log("Test Data Start Date : ", this.startDate)
console.log("Test Data Start Time: ", this.startTime)
console.log("Test Data End Date : ", this.endDate)
console.log("Test Data End Time : ", this.endTime)
console.log("Test Data Editor's data : ", this.editor)
}
}
};
</script>
我已经尝试了以下答案： Vue Component prop in vuetify component
并尝试将此行添加到我的 TambahkanPromosi.vue ：
<template>
<div id="pageEditor">
<v-container grid-list-xl fluid>
<v-layout row wrap>
<v-flex sm12>
<h3 class="pa-0">Deskripsi</h3>
</v-flex>
<v-flex sm12>
<quill-editor
class="quill"
:content="content"
:options="editorOption"
v-model="editor"
>
</quill-editor>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
export default {
components: {
quillEditor
},
data () {
return {
editor: null,
content: '',
editorOption: {
}
};
},
computed: {
},
methods: {
}
};
</script>
<style lang="stylus" scoped>
.quill
height : 520px
</style>
但是在那之后，编辑器本身并没有只出现<template slot-scope="props">
<editors v-model="props.editor"></editors>
</template>
中出现的某种形式。
有人可以帮助并指导我传递数据，以便在使用API进行解析之前先查看一下console.log吗？