Yêu cầu thg 9 27, 2019 8:51 SA 184 1 2
  • 184 1 2
+2

Nuxtjs: Script trong component bị load nhiều lần khi chuyển page ?

Chia sẻ
  • 184 1 2

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

thg 9 27, 2019 8:53 SA

click vào nut search sẽ Toggle ra blocksearch

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ì?

Avatar Vũ Nguyễn @vunguyen10111995
thg 9 27, 2019 8:53 SA

bạn show code ra cho mọi người xem cho dễ hiểu được không?

Avatar TAMIX @tuananhbfs
thg 9 27, 2019 9:29 SA

@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

2 CÂU TRẢ LỜI


Đã trả lời thg 9 27, 2019 9:27 SA
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>
Chia sẻ
Avatar Tran Dai Son @tran.dai.son
thg 9 30, 2019 9:37 SA

Đã 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.

Avatar TAMIX @tuananhbfs
thg 10 1, 2019 3:39 SA

@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

Đã trả lời thg 10 2, 2019 3:42 SA
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à.

Chia sẻ
Avatar TAMIX @tuananhbfs
thg 10 2, 2019 9:15 SA

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.

Avatar Tý Lưu @dinhty.luu
thg 10 3, 2019 6:56 SA

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 😃
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí