Vue JS组件V-Model $ emit

时间:2017-12-21 16:46:54

标签: javascript laravel vue.js vuejs2 vue-component

我正在使用Vue JS 2和Laravel 5.5。当我使用一个组件并在$ emit中传回v模型然后查看使用它上面的数据时,它返回' undefined'在生产中。但是,如果我在我的本地开发环境中使用它可以正常工作吗?

我的想法是,我可以从文本编辑器中收集数据,然后在保存内容时存储。

我已经尝试过&n 34运行开发"

我的组件

<template>
    <div>
    <ckeditor 
      v-model="editorInfo.content" 
      :config="config" 
      @blur="onBlur($event)">
    </ckeditor>
  </div>
</template>

<script>
    import Ckeditor from 'vue-ckeditor2';
    export default {
      components: { Ckeditor },
      props: {
        type: '',
        content: ''
      },
      data () {
        return {
          content: '',
          editorInfo: {
            type: '',
            content: this.content
          },
          config: {
            height: 300,
          }
        }
      },
      methods: {
        onBlur (editor) {
          this.editorInfo.type = this.type;
          this.$emit('update',this.editorInfo);
        }
      }
    }
</script>

我的父母

import MyCkeditor from './../components/MyCkeditor';

new Vue({
  el: '#vue',
  components: { MyCkeditor }, 
  data: {
    category: {
        title: '',
        description: '',
        extra_content: '',
    }
  }
  methods: {
    Update(value){
      console.log(value);
      if(value.type == 'description'){
        this.category.description = value.content;
      } else {
        this.category.extra_content = value.content;
      }
    }
  },
})

我的HTML

<div class="form-group">
<label>Description</label>
<my-ckeditor :type="'description'" v-on:update="Update"></my-ckeditor>
</div>

0 个答案:

没有答案