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

181
02 июня 2018, 21:40

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

Answer 1

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

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

READ ALSO
Вывод меню пути реализации на wordpress

Вывод меню пути реализации на wordpress

уважаемые коллеги,подскажите, пожалуйста как в wordpress реализовать меню как на сайте http://xn--80aidokfob8exn--p1ai/ Там где выбираешь iphone и нужная информация...

190
Зафиксировать столбцы таблицы

Зафиксировать столбцы таблицы

Вывожу из бд тиблицу, в таком формате

206
Как получить значение с api другого сайта?

Как получить значение с api другого сайта?

Как получить на своем сайте значение курса биткоина с этого сайта https://coinmarketcapcom/

204
Progress bar CONTROL

Progress bar CONTROL

Есть готовый прогресс барКто знает как с горизонтального можно сделать вертикальный и + сделать рандомный ввод чисел с интервалом в 5 секунд

220