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

Tôi đang sử dụng Vuejs. Đây là đánh dấu của tôi:[Cảnh báo Vue]: Không thể tìm thấy phần tử

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

Nguồn

2015-04-07 dopatraman

Việc làm này ở chân, hoặc tiêu đề? –

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

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

141

Tôi nghĩ rằng 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 mình vào đầu trang hoặc trong thẻ tập lệnh được đặt trước phần tử div #main. Vì vậy, khi kịch bản được thực hiện nó sẽ không thể tìm thấy các yếu tố mục tiêu do đó lỗi.

Một giải pháp là đặt kịch bản của bạn trong 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

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

Nguồn

2015-04-07 05:45:28

hey 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 doc không có nói, cảm ơn –

Cũng cần lưu ý, phương pháp 'addEventListener' là" kỹ thuật "một cách tiếp cận dễ bảo trì hơn bởi vì nó không phải là trọng thuộc tính 'window.onload' toàn cục. – joshwhatk

Bao gồm tập lệnh bó Webpack trong phần '' là nguyên nhân gây ra lỗi cho tôi. Đang chờ cửa sổ được tải đang hoạt động. –

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

Nguồn

2016-11-14 16:44:31

trước khi kết thúc cơ thể nhưng không phải trong đầu? điều đó chính xác có nghĩa là gì? – daslicious

–

đặt mã vue.js của bạn trước, trước tiên trình duyệt sẽ tải nội dung nội dung, sau đó tải mã vue.js, nó sẽ hoạt động. –

Tôi đã giải quyết được sự cố bằng cách thêm thuộc tính 'trì hoãn' vào phần tử 'tập lệnh'.

Nguồn

2017-08-20 10:06:03

Đây là giải pháp sạch nhất của tất cả, nên có nhiều upvotes hơn! –

Thông tin thêm về trì hoãn ở đây: https://www.w3schools.com/Tags/att_script_defer.asp –

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

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

app.js file:

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

Nguồn

2017-10-01 16:42:25

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

Trả lời

Các vấn đề liên quan