来自父方法

Question

我有通过组件方法更新的可编辑元素，但我也有json导入，我想更新元素我的父方法。我可以更新模型，但可编辑元素不会绑定它。如果我将内容插入组件模板，它将绑定更新的模型，但后来我无法真正编辑它。

以下是我的示例：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>

Answer 1

工作示例：

＆＃13;

＆＃13;

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
    }
  }
})

＆＃13;

<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/vue@2.5.3/dist/vue.min.js"></script>

＆＃13;

＆＃13;

＆＃13;