Shulou(Shulou.com)05/31 Report--

This article mainly introduces "vue2 how to achieve div contenteditable=" true "effect" related knowledge, editor through the actual case to show you the operation process, the operation method is simple and fast, practical, I hope that this "vue2 how to achieve div contenteditable=" true "effect" article can help you solve the problem.

Find a problem

There is a good bi-directional data binding mechanism for form controls in vue2, but for inputs that specifically implement certain functions, we have to use div of contenteditable= "true", and using v-model on this div has no effect. So the problem is, input is very much in need of two-way binding, how to implement two-way data binding here?

Solution 1: custom instructions

Of course, in front of this paragraph, this solution does not work in vue2. Why do you say so? because most of the search results for this problem are this, so they are put in front.

The principle of implementation and why it can't be used.

Principle: customize a two-way data binding instruction, the code is as follows:

Vue.directive ('demo', {twoWay: true, bind: function () {this.handler = function () {this.set (this.el [XSS _ clean])} .bind (this) this.el.addEventListener (' input', this.handler)}, update: function (newValue, oldValue) {this.el [XSS _ clean] = newValue | |'}, unbind: function () {this.el.removeEventListener ('input', this.handler)})

As for these methods under this, they may not be easy to find on the vue website because they are content in vue1 and have been removed in vue2. So we can't do this in vue2, of course, if you use vue1, then no problem at all, just use it.

Solution 2: use components

Declare a separate component, process the data (that is, innerHTML) within the component, and return the data to the parent component.

The code is as follows:

Export default {props: ['value'], data () {return {innerText:this.value}}, methods: {changeText () {this.innerText = this.$ el [XSS _ clean]; this.$emit (' input',this.innerText);}

Then use v-model directly in the parent component (here I define the component name as v-edit-div).

{{text}} export default {data () {return {text:' try it',} this is the end of the introduction about "how vue2 achieves the div contenteditable=" true "effect". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.