Как получить данные из редактора quill с помощью vuetify props - PullRequest
0 голосов
/ 16 февраля 2019

Я новичок, когда использую 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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...