How to do two way binding in custom directives in Vue.js 2?

Question

Hi I am looking for a solution for two way binding in Vue.js 2. I found a answer here about two way binding but it is in Vue.js 1. I tried to work it in Vue.js 1. But it didn't work. Can anyone help me here.

Why I want that? A - I have a contenteditable div and a span tag inside which is shows a variable with v-html. But I want some functions to call when some edit happens. @change and @keyup don't work with span in vuejs 1. So I moved to custom directives.

Answer 1

To support something like this in vue2.0: as suggested by Evan You in forum here is to put these kind of functionality in a component and to reuse the same functionality on multiple components you can extract it into a shared mixin.

My suggestion is that the logic should be handled inside the component. In 2.0 v-model can work on components, e.g. https://github.com/vuejs/vue/blob/next/examples/select2/index.html

If you want to reuse the same logic on multiple components you can extract it into a shared mixin.