CODEWITHSUNDEEP
vue.jscontenteditablevue-component
Radek Mezuláník
Radek Mezuláník

Reputation: 401

VueJS 2 update contenteditable in component from parent method

I have editable element updated by component method, but i have also json import and i want to update element my parent method. I can update model, but editable element doesn´t bind it. If i insert content to component template, it will bind updated model, but then i can´t really edit it.

Here´s my example: https://jsfiddle.net/kuwf9auc/1/

Vue.component('editable', {
    template: '<div contenteditable="true" @input="update"></div>',  /* if i insert {{content}} into this div, it wil update, but editing behave weird */
    props: ['content'],
    mounted: function () {
        this.$el.innerText = this.content;
    },
    methods: {
        update: function (event) {
            console.log(this.content);
            console.log(event.target.innerText);
            this.$emit('update', event.target.innerText);
        }
    }
})

var app = new Vue({
    el: '#myapp',
    data: {
        herobanner: {
            headline: 'I can be edited by typing, but not updated with JSON upload.'
        }
    },
    methods: {
        uploadJSON: function (event) {
            var input = event.target;
            input.src = URL.createObjectURL(event.target.files[0]);
            var data = input.src;
            $.get(data, function(data) {
                importdata = $.parseJSON(data);
                this.$data.herobanner = importdata.herobanner;
            }.bind(this));
        }
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="myapp" class="container-fluid">
<input type="file" id="file" name="file" @change="uploadJSON" style="display: none; width: 1px; height: 1px"/>
                <a href="" onclick="document.getElementById('file').click(); return false" title="Import settings from JSON file">
                    upload JSON
                </a>
  <h1>
    <editable :content="herobanner.headline" @update="herobanner.headline = $event"></editable>
     </h1>
    Real value of model:
    <br>
    <h2>{{herobanner.headline}}</h2>
 
</main>

Upvotes: 1

Views: 5725

Answers (1)

user6748331
user6748331

Reputation:

Working example:

Vue.component('editable', {
  template: `
    <div contenteditable="true" @blur="emitChange">
      {{ content }}
    </div>
  `,
  props: ['content'],
  methods: {
    emitChange (ev) {
      this.$emit('update', ev.target.textContent)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    herobanner: {
      headline: 'Parent is updated on blur event, so click outside this text to update it.'
    }
  },
  methods: {
    async loadJson () {
      var response = await fetch('https://swapi.co/api/people/1')
      var hero = await response.json()
      this.herobanner.headline = hero.name
    },
    updateHeadline (content) {
      this.herobanner.headline = content
    }
  }
})
<main id="app">
  <button @click="loadJson">Load JSON data</button>
  <h1>
    <editable
      :content="herobanner.headline"
      v-on:update="updateHeadline"
    >
    </editable>
  </h1>
  <h2>{{herobanner.headline}}</h2>
</main>

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

Upvotes: 6

Related Questions