Я новичок, когда использую vue.js. В настоящее время я пытаюсь создать веб-сайт администратора, используя Vuetify, и хочу создать страницу продвижения, для которой требуется редактор WYWSIYG, но когда я хочу получить данные, используя console.log()
прежде чем пытаться опубликовать его с помощью API, я ничего не могу получить из редактора quill, но это успех, когда я пытаюсь сделать это, используя обычный <v-text-field>
, что я хочу получить, это значение всего этого:
console.log("Test Data Title : ", this.title)
Название тестовых данных: тестовое продвижение
console.log("Test Data Start Date : ", this.startDate)
Дата начала тестовых данных: 2019-02-12
console.log("Test Data Start Time: ", this.startTime)
Время начала тестовых данных: 02: 30
console.log("Test Data End Date : ", this.endDate)
Дата окончания тестовых данных: 2019-02-28
console.log("Test Data End Time : ", this.endTime)
Время окончания тестовых данных: 05: 30
console.log("Test Data Editor's data : ", this.editor)
Данные редактора тестовых данных: undefined --> Не могу этого достичь
Это мой код для TambahkanPromosi.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>
Это мой Editors.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>
Я уже попробовал ответить от: Vue Component prop в vuetify component
и попытался добавить эту строку в мой TambahkanPromosi.vue :
<template slot-scope="props">
<editors v-model="props.editor"></editors>
</template>
, но после этого в самом редакторе не появляется только какая-то форма из <v-form>
, которая появляется.
Может кто-нибудь помочь и направить меня к прохождениюданные, чтобы я мог взглянуть на мой console.log, прежде чем анализировать его с помощью API?