Как связать contenteditable блок с переменной (Vue)

#javascript #vuejs

Как связать блок с contenteditable с переменной используя vue?
    

Ответы

Ответ 1

Vue.component('editable',{
  template:'
',
  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!"
  }
});


  
  

    
{{$data |json }}
  





https://codepen.io/supraniti/pen/Lypobx


Ответ 2

Можно обойтись без компонента: 



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


  
Lorem ipsum





Принцип прост: слушаем событие 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; }
 


  
Lorem ipsum