Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wysiwig editor can't handle :value #116

Open
Chris2011 opened this issue Apr 9, 2020 · 2 comments
Open

wysiwig editor can't handle :value #116

Chris2011 opened this issue Apr 9, 2020 · 2 comments

Comments

@Chris2011
Copy link

Context:
I use this editor inside of a child component so I input my content from the parent. When I use v-model I got the error of vue, that I shouldn't update props directly. So I switched from v-model to :value.

Expected behaviour:
It should show the content inside of the editor

What happens:
Nothing is shown in the editor.

Code:
Parent component:

<input-control :type="item.contentType" v-model="myValue" @update="touchForm" />

Child component:

<template>
    <fragment>
        <v-text-field v-if="type === 'simple" :value="value" @input="update" />
        <v-textarea v-if="type === 'multiline'" :value="value" :auto-grow="true" :rows="1" @input="update" />
        <wysiwyg v-if="type === 'richtext'" :value="value" @input="update" />
    </fragment>
</template>

<script lang="ts">
import Vue from 'vue';
import { Prop, Emit } from 'vue-property-decorator';
import { ContentType } from './ContentType';
import Component from 'vue-class-component';

@Component
export default class InputControl extends Vue {
    @Prop()
    public type: ContentType;

    @Prop()
    public value: string;

    @Emit('update')
    public update(val): string {
        return val;
    }
}
</script>
@Chris2011
Copy link
Author

Maybe I missed smth and the solution is easy :)

@ChunAllen
Copy link

ChunAllen commented Jul 9, 2020

I managed to made this work using computed property with getter and setter

props: {
  value: { type: string }
},
computed: {
   val: {
      get() { return this.value },
      set(value) { this.$emit('input', value) }
   }
}

then I use the

  <wysiwyg v-model="val" />

if you other solution, please let me know :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants