3 回答

TA貢獻1865條經驗 獲得超7個贊
import { createPopper } from '@popperjs/core';
export default {
name: "TestView",
components: {
},
data() {
return {
};
},
mounted(){
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
createPopper(button, tooltip);
}
};
你應該使用 refs 而不是 id(我在這里沒有使用它們以避免混淆你),這將確保沒有沖突,因為你的應用程序可以有多個具有相同 Id 的元素,例如#button。當使用像 popper js 這樣的 UI 庫時,總是嘗試將它們的代碼放在 mounted 鉤子中,mounted 鉤子確保你定位的元素(例如 #button)在 dom 中

TA貢獻1820條經驗 獲得超10個贊
您必須添加this.$nextTick僅在呈現整個視圖后才會運行的代碼(https://vuecomponent.com/integrations/popperjs.html)
import { createPopper } from '@popperjs/core';
export default {
name: "TestView",
components: {
},
data() {
return {
};
},
mounted(){
this.$nextTick(() => {
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
createPopper(button, tooltip);
});
}
};
添加回答
舉報