+2
Nuxtjs: Script trong component bị load nhiều lần khi chuyển page ?
Giả sử mình có 1 component chứa nút Search, click vào nut search sẽ Toggle ra blocksearch.
Vấn đề là: lúc chuyển sang page khác thì đoạn script này sẽ bị thêm vào 1 lần nữa, thành ra có 2 cái toggle() chạy khi click, Mỗi lần chuyển page nó đều += 1 lần đọan script này,
Các bác có cách nào cho mình giới hạn nó chỉ load ra 1 lần dc ko? Thank you
2 ANSWERS
0
<div class="col-sm-12">
<div id="block-search">
<div id='form-search' class='' >
<form action='' method='post'>
<div id='' class='search-box' >
<input type='text' name='keyword' placeholder='Nhập tìm kiếm ...' value='' id='search_text' />
<input type='submit' name='search' value='Tìm kiếm' id='search_sub' />
</div>
</form>
</div>
</div>
<div id='search' class='' >
<img id='icon-search' src='~/assets/frontend/images/index/icon-search.svg' alt='search' title='search' />
</div>
</div>
<!-- component html-->
<script>
export default {
};
if (process.client) {
$(document).on('router-loaded',function(){
$('body').on('click','#icon-search',function(){
$('#form-search').toggle(500);
});
});
};
</script>
Đã dùng nuxt rồi lại còn dùng jquery vào làm gì cho nặng. Cái gì cần làm bạn xử lý luôn bằng Vue đi. Nguyên nhân bạn gặp lỗi này cũng là do jquery mà ra.
$(document).on('router-loaded',...
Đoạn gắn sự kiện nó gắn tận 2 lần nên bị gọi nhiều lần là phải thôi.
Có addEventListener thì nên có removeEventListener nếu không chắc là cái phần tử/component đó có bị destroy trong quá trình sử dụng không.
Còn nếu gắn event bằng v-on (hoặc @ thì đã không đến nông nỗi.
@tran.dai.son Mình biết lý do xảy ra tình trạng này là gì, mình cũng nêu rõ trong câu hỏi của mình mà , mình cũng đã code lại đọan js đó theo cách của vue. Nhưng mình vẫn muốn tìm hiểu xem liệu có cách nào để xử lý ko, biết đâu đó sau này cần dùng tới 
Thank you
0
Đại khái là dùng NUXT làm 1SPA
Làm SPA cần j dùng nuxt cho rườm rà vậy bạn, NUXT là để làm SSR mà.
SSR có nguồn gốc từ SPA mà.
Nuxt sinh ra để code nhanh hơn sao lại gọi là rườm rà dc .
Đôi khi cũng có những thứ mình cần xử lý bằng jquery hoặc javascript (mà vue ko đáp ứng dc). Nên mình đặt câu hỏi xem sao.
Có vẻ như concept của bạn nó hơi loạn:
- Install nuxt để làm SSR, để giải quyết các vấn đề liên quan tới SSR. Nếu chỉ là 1 SPA thì uninstall nuxt.
- Còn bạn nói Jquery làm được mà vue ko làm đc => Bạn chưa đọc hết docs của Vue rồi
Bạn có thể giải thích cái đoạn này không. Mình đọc mãi cũng chưa hiểu ý bạn đang nói gì?
bạn show code ra cho mọi người xem cho dễ hiểu được không?
@huukimit mình ko biết post code làm sao cho đẹp
Đại khái là dùng NUXT làm 1SPA,
Mỗi lần chuyển trang nó load thêm 1 lần javascript