Asked Sep 27th, 2019 8:51 AM 150 1 2
  • 150 1 2
+2

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

Share
  • 150 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

Sep 27th, 2019 8:53 AM

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

0
| Reply
Share
Avatar Vũ Nguyễn @vunguyen10111995
Sep 27th, 2019 8:53 AM

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

0
| Reply
Share
Avatar Lê Tuấn Anh @tuananhbfs
Sep 27th, 2019 9:29 AM

@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

0
| Reply
Share

2 ANSWERS


Answered Sep 27th, 2019 9:27 AM
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>
Share
Avatar Tran Dai Son @tran.dai.son
Sep 30th, 2019 9:37 AM

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

+1
| Reply
Share
Avatar Lê Tuấn Anh @tuananhbfs
Oct 1st, 2019 3:39 AM

@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
| Reply
Share
Answered Oct 2nd, 2019 3:42 AM
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à.

Share
Avatar Lê Tuấn Anh @tuananhbfs
Oct 2nd, 2019 9:15 AM

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.

0
| Reply
Share
Avatar Tý Lưu @dinhty.luu
Oct 3rd, 2019 6:56 AM

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 😃
0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.