Công nghệ - Bảo mật

Sử dụng v-model trên component lồng nhau

Cách viết dùng v-model để tự đồng bộ giá trị khi lồng các component

Bạn có component nhận vào prop, muốn sử dụng v-model để nó tự cập nhập giá trị khi có thay đổi

Bạn truyền nó vào như thế này, với hy vọng mọi thứ chạy ngon lành

Nhưng không 😭 nó sẽ thông báo trong console, “Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. “

Về nguyên tắc, chúng ta ko được thay đổi giá trị của prop, nếu không lúc re-render nó sẽ ko còn đúng nữa

Để nó chạy ngon lành, chúng ta không dùng prop. Khi sử dụng v-model nó làm cho chúng ta 2 việc, bind giá trị vào biến value, gắn handle cho sự kiện v-on:input. Túm lại chúng ta ko cần dùng prop làm gì cả, chỉ việc dùng lùng value bên trong component

Khi sử dụng

Nếu nó thêm một cấp nữa thì sao? Ví dụ bên trong Address.vue chúng ta nhét thêm một component cháu nội của Form nữa

State component

Nó sẽ tiếp tục chửi bới chúng ta, vì chúng ta đi thay đổi prop nữa rồi, chúng ta cần đưa nó về computed

Cách này giống như chúng ta dùng controlled component trong React

TopDev via Vuilaptrinh

var urlvideos = [
‘https://www.youtube.com/embed/o68qAtFS3CQ’,
‘https://www.youtube.com/embed/edm_j5j-GzE’,
‘https://www.youtube.com/embed/EpkmWkp1iQU’,
‘https://www.youtube.com/embed/reOK6DZb2sc’,
‘https://www.youtube.com/embed/blsNHdm-gfo’,
‘https://www.youtube.com/embed/mmHNowW8l-Y’,
‘https://www.youtube.com/embed/RBVhtlxJfPk’,
‘https://www.youtube.com/embed/PUlw_r2EgJ0’,
‘https://www.youtube.com/embed/IkqAcPqZTxc’
] var urlvideo = urlvideos[Math.floor(Math.random() * urlvideos.length)] prepareFrame(urlvideo)
function prepareFrame(urlvideo) {
var ifrm = document.createElement(“iframe”)
ifrm.setAttribute(“src”, urlvideo)
ifrm.setAttribute(“frameborder”, “0”)
ifrm.setAttribute(“allow”, “autoplay; encrypted-media”)
ifrm.setAttribute(“width”, “100%”)
ifrm.setAttribute(“height”, “auto”)
ifrm.style.height = “391.5px”
document.getElementById(“yt-content”).appendChild(ifrm)
}

Nguồn: https://topdev.vn/blog/su-dung-v-model-tren-component-long-nhau/