Имеет ли Vue двустороннее связывание?

К сожалению, v-modelне работает с Vueпривязками, например new Vue({ el: '#app', methods: { updateMessage() { this.message = this.$refs.message.innerText; } }, watch: { message() { this.$refs.message.innerText = this.message; } }, data: { message: 'Hello' } }) , рекомендуется использовать такую ??библиотеку, как medium.js, для создания собственного компонента.

Однако, если вы просто пытаетесь сделать что-то простое и синхронизировать данные, вы, вероятно, можете сделать это сами:

Просмотр модели

  <p ref="message" contenteditable="true" @keyup="updateMessage" class="editable">{{message}}</p>

HTML

contenteditable

 

Как вы можете видеть, вам приходится иметь дело с обновлением DOM самостоятельно при использовании this.$refs.message.innerText. То, что я на самом деле делаю здесь, это использовать ref для таргетинга на контент, поэтому я могу получить внутренний текст @keyup. Затем я добавил updateMessageсобытие, которое вызывает messageметод для обновления watcherсвойства данных. Затем я добавил значение, v-modelкоторое отменяет этот процесс, поэтому, когда сообщение обновляется, оно обновляет контент.

Вот JSFiddle: https://jsfiddle.net/3ngc9486/

Да, он имеет двухстороннюю директиву привязки p, но работает только с элементами ввода. Таким образом, вместо использования pэлемента и обработки, что со сложным JS, используйте textareaс, v-modelи он будет работать из коробки.

<textarea v-model="message"></textarea>

вот пример .