1
私はコンポーネントメソッドによって更新された編集可能な要素を持っていますが、私もjson importを持っています。私はモデルを更新できますが、編集可能な要素はそれを束縛しません。コンポーネントテンプレートにコンテンツを挿入すると、更新されたモデルがバインドされますが、実際には編集できません。VueJS 2 update親要素のメソッドからcontenteditable
Here's私の例：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>
私は問題がアップロード中だと思い、作りjsonが正しく解析されているかどうかを確認してください。 console.log（）何か。なぜ 'this。$ data'を使って' this'を関数にバインドしているのですか？関数内に 'data' varがあっても' this.data'だけを使うのが好きです。たぶんそれをデバッグするほうがいいですか？ – samayo
DOMのプリマを使っています。あなたには、あなたの前で、あなたの前で、あなたの前で、あなたの手で、ネイバーシティーは、.innerTextですか？ネームから.textContent？ – WaldemarIce
@サマヨはい私は現在のモデルとインポートされたjsonのいくつかの違いを見ることができますが、モデルにはオブジェクトが含まれていますが、ロードされたjsonには文字列が含まれています： -/ ** WaldemarIce ** pravda、jinak textContent mi fungovalstejnějako innerHtml、zobrazil jsem model、編集部の編集： –