[Vue cảnh báo]: Không thể tìm thấy phần tử

166

Tôi đang sử dụng Vuejs . Đây là đánh dấu của tôi:

<body>
  <div id="main">
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
  </div>
</body>

Đây là mã của tôi:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
})
;

Khi tôi tải trang tôi nhận được cảnh báo này:

[Vue warn]: Cannot find element: #main

Tôi đang làm gì sai?

javascript mvvm vue.js

— dopatraman
nguồn

1

Làm điều này trong phần chân trang, hoặc tiêu đề?

— Chris Baker

6

chuyển tập lệnh của bạn sang trình xử lý sẵn sàng cho cửa sổ

— Arun P Johny

2

xử lý sẵn sàng là vấn đề. có vẻ ngớ ngẩn rằng vue không bao gồm điều này ... @ArunPJohny - nếu bạn gửi câu trả lời với một đoạn mã bị đánh dấu thì nó là chính xác.

— dopatraman

317

Tôi nghĩ vấn đề là tập lệnh của bạn được thực thi trước khi phần tử dom đích được tải trong dom ... một lý do có thể là bạn đã đặt tập lệnh của bạn vào đầu trang hoặc trong thẻ script được đặt trước phần tử div #main. Vì vậy, khi tập lệnh được thực thi, nó sẽ không thể tìm thấy phần tử đích do đó xảy ra lỗi.

Một giải pháp là đặt tập lệnh của bạn vào trình xử lý sự kiện tải như

window.onload = function () {
    var main = new Vue({
        el: '#main',
        data: {
            currentActivity: 'home'
        }
    });
}

Một cú pháp khác

window.addEventListener('load', function () {
    //your script
})

— Arun P Johny
nguồn

4

này cảm ơn, xin lỗi vì đã bình luận ở đây tại sao vue js cần phải tải nó, trong tài liệu không có nói, cảm ơn

— Freddy Sidauruk

9

Cũng cần lưu ý, addEventListenerphương pháp này "về mặt kỹ thuật" là một cách tiếp cận dễ bảo trì hơn vì nó không ghi đè lên window.onloadtài sản toàn cầu .

— joshwhatk

Bao gồm tập lệnh gói Webpack trong <head></head>phần là nguyên nhân gây ra lỗi cho tôi. Chờ cho cửa sổ được tải là làm việc.

— Amin NAIRI

1

Không có cảnh báo nào trong bảng điều khiển rằng các câu lệnh script chứa tham chiếu đến các phần tử DOM đang được đánh giá trước khi DOM được tải? Làm thế nào điều này có thể là một cảnh báo khó thực hiện?

— Tom Russell

70

Tôi đã giải quyết vấn đề bằng cách thêm thuộc tính 'defer' vào phần tử 'script'.

— Su Chuan
nguồn

Có bất kỳ tác dụng phụ với việc sử dụng defer?

— Mohammad Ali Akbari

1

Bạn có thể đọc thêm về cách deferthuộc tính của thẻ script hoạt động ở đây . Nó sẽ trì hoãn việc chạy mã JS cho đến khi DOM được phân tích cú pháp, nhưng trước khionload sự kiện cửa sổ được kích hoạt.

— JrBaconCheez

51

Tôi nhận được lỗi tương tự. giải pháp là đặt mã script của bạn trước khi kết thúc phần thân, không phải trong phần đầu.

— li bing ziao
nguồn

Trước khi hết cơ thể nhưng không ở trong đầu? điều đó chính xác có nghĩa là gì?

— lúng túng

6

— li bing zhao

3

đặt mã vue.js của bạn trước </ body>, các trình duyệt sẽ tải nội dung cơ thể trước, sau đó tải mã vue.js, nó sẽ hoạt động.

— li bing zhao

1

Gặp phải vấn đề này trong khi sử dụng Laravel và hỗn hợp laravel đi kèm. Di chuyển tải của js đến sau khi cơ thể giải quyết nó.

— john

24

Điều đơn giản là đặt tập lệnh bên dưới tài liệu, ngay trước </body>thẻ đóng của bạn :

<body>
   <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
   </div>
   <script src="app.js"></script>
</body>

tệp app.js:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});

— Tadas Stasiulionis
nguồn

0

Bạn có thể giải quyết nó theo hai cách.

Hãy chắc chắn rằng bạn đặt CDN vào cuối trang html và đặt tập lệnh của riêng bạn sau đó. Thí dụ:

    <body>
      <div id="main">
        <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
      </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/app.js"></script>

nơi bạn cần đặt cùng một mã javascript mà bạn đã viết trong bất kỳ tệp JavaScript nào khác hoặc trong tệp html.

Sử dụng hàm window.onload trong tệp JavaScript của bạn.

— Nijat Mursali
nguồn

0

Tôi nghĩ đôi khi những sai lầm ngu ngốc có thể cho chúng ta lỗi này.

<div id="#main"> <--- id with hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

Đến

<div id="main"> <--- id without hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

— Nisharg Shah
nguồn