Vue.js v-html contenteditable ngăn chặn làm mới dom để giữ cho cursor/caret nhảy

Question

Để tham khảo, tôi đang sử dụng Vue 2.0, Vuex và Firebase.

Tôi đang xây dựng thành phần có thể chỉnh sửa bằng cách sử dụng liên kết v-html để hiển thị innerHTML. Dữ liệu được cập nhật onKeyUp. Bất cứ khi nào dữ liệu được cập nhật, phần tử DOM làm mới bằng dữ liệu "mới", khiến dấu mũ/con trỏ nhảy trở lại phần đầu của div có thể chỉnh sửa được.

Tôi đã xem xét Rangy và một số giải pháp ngăn xếp khác, nhưng tôi cảm thấy giải pháp đơn giản nhất là hủy liên kết phần tử DOM khỏi làm mới dữ liệu. Tôi muốn cho dữ liệu vẫn cập nhật trong firebase nhưng không dẫn đến làm mới phần tử.

Có cách nào để tôi vẫn sử dụng v-html nhưng ngăn phần tử DOM làm mới với dữ liệu? Hoặc là có một cách khác để hiển thị HTML mà không có ràng buộc tự động?

Edit: 11/18/16

Vì vậy, tôi đã tiếp tục làm việc trên một sửa chữa cho việc này. Dưới đây là ý tưởng hiện tại của tôi.

1. Sử dụng lifecycle hook và ngừng hiển thị lại thành phần. Tôi đã xem qua tài liệu Vue nhưng dường như không thể tìm thấy thứ gì đó để dừng chu trình.
2. Sử dụng một cái gì đó như React’s “componentShouldRender”. Một lần nữa, nó không giống như Vue.js có một phương pháp so sánh trong vòng đời.

Nếu bất kỳ ai biết về bất kỳ phương pháp nào để kết thúc vòng đời, ngừng hiển thị lại hoặc một cách để có được chức năng "componentShouldRender" của React, phải đủ để khắc phục sự cố này.

-

Cập nhật: 11/29/16

Bản cập nhật này là muộn một chút tới. Tôi đã đăng nhập feature request bằng Vue trên Github.

Có một vài JSFiddles trong cuộc thảo luận vấn đề có thể cung cấp potential solution. Tuy nhiên không ai trong số họ tôi tin rằng đủ điều kiện như là một giải pháp hoàn chỉnh. Người hứa hẹn duy nhất gần đây đã mang lại more issues.

Tất cả những vấn đề này sẽ không phải là vấn đề với việc bổ sung móc nối vòng đời componentShouldRender. Tôi sẽ tiếp tục tìm kiếm một giải pháp hoàn chỉnh

Answer 1

Vấn đề như tôi hiểu là sự kiện đẩy hoặc bong bóng lên để nó làm cho vue tái kết xuất div làm cho crusor nhảy đến đầu nó.

thêm event.preventDeafault(); dòng bên trong phương thức setContent() trong ví dụ fiddle của bạn sẽ thực hiện công việc.

để biết thêm chi tiết - Phương pháp trong phần Bộ xử lý nội tuyến trong vue documentations.

Answer 2

Có cách nào để tôi vẫn sử dụng v-html nhưng ngăn phần tử DOM làm mới với dữ liệu?

Có. Chỉ thị v-once thực hiện chính xác điều này.

https://vuejs.org/v2/api/#v-once