Как связать блок с contenteditable
с переменной используя vue
?
Vue.component('editable',{
template:'<div contenteditable="true" @input="update"></div>',
props:['content'],
mounted:function(){
this.$el.innerText = this.content;
},
methods:{
update:function(event){
this.$emit('update',event.target.innerText);
}
}
})
var example = new Vue({
el: '#example',
data: {
text:"This text is editable!"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="example">
<editable :content="text" @update="text = $event"></editable>
<div>
<pre>{{$data |json }}</pre>
</div>
</div>
https://codepen.io/supraniti/pen/Lypobx
Можно обойтись без компонента:
new Vue({
el: '#test',
data: { content: '' },
methods: {
onCeChange: function () { this.content = this.$refs.ce.textContent; }
},
watch: {
content: function (val) {
this.$refs.ce.textContent = val;
console.clear();
console.log('this.content: ' + val);
}
},
mounted: function () { this.onCeChange(); }
});
[contenteditable] { border: 1px solid #ccc; }
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="test">
<div ref="ce" @input="onCeChange" contenteditable>Lorem ipsum</div>
</div>
Принцип прост: слушаем событие input
на элементе, и (для двусторонней связи) отслеживаем изменение свойства через watch
.
Более грамотный подход с использованием вычисляемого свойства:
new Vue({
el: '#test',
computed: {
content: {
cache: false,
get: function () { return this.$refs.ce.textContent; },
set: function (val) { this.$refs.ce.textContent = val; }
}
},
methods: {
onCeChange: function () {
console.clear();
console.log('this.content: ' + this.content);
}
},
mounted: function () { this.onCeChange(); }
});
[contenteditable] { border: 1px solid #ccc; }
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="test">
<div ref="ce" @input="onCeChange" contenteditable>Lorem ipsum</div>
</div>
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
уважаемые коллеги,подскажите, пожалуйста как в wordpress реализовать меню как на сайте http://xn--80aidokfob8exn--p1ai/ Там где выбираешь iphone и нужная информация...
Как получить на своем сайте значение курса биткоина с этого сайта https://coinmarketcapcom/
Есть готовый прогресс барКто знает как с горизонтального можно сделать вертикальный и + сделать рандомный ввод чисел с интервалом в 5 секунд