Thay thế thẻ html bằng 1 component vuejs
em đang làm 1 trang bằng vuejs cho phép sửa đổi nhiều ô trong 1 bảng giống như thằng Word. Hiện tại, em làm mỗi ô là 1 component ckeditor. Tuy nhiên, vì có quá nhiều component ckeditor nên thời gian render của trang rất lâu. Bây giờ em muốn khi người dùng click vào mỗi ô trong bảng thì ta sẽ append 1 component ckeditor. Vấn đề ở chỗ, em dùng hàm replaceWith của thằng js thì nó chỉ thay thế html, còn các phần của thằng vue như @click, @blur, v-model thì không sử dụng được. Có ai biết thì giúp em với ạ.
1 ANSWERS
Bạn thử tách cái CKEditor thành một component riêng, có một method để get dữ liệu, hoặc emit một event khi dữ liệu bị sửa đổi.
Sau đó dùng v-if="editing"
. Ô nào click sửa thì editing = true
, editor mới render và hiện ra cho phép sửa.
<table-cell>
<ck-editor v-if="editing" :value="contents" @change="onChange"/>
</table-cell>
vấn đề là trong trang có nhiều chỗ cần sử dụng ckeditor, khi edditing = true thì nó sẽ render hàng loạt luôn
@2751997nam Mỗi cell có một editing
. Chỗ nào bạn cần sửa thì enable cell đấy lên.