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 CÂU TRẢ LỜI
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.