我有一個奇怪的任務。我只是想在單擊元素時在元素上添加一個附加功能。我似乎無法觸發在我的方法中找到的 addScroll 函式。如您所見，當單擊按鈕時，應該將 div 附加到螢屏上。一旦該 div 也被單擊，將應用 remove 方法，我還想應用 addScrollBack()。
new Vue({
el: "#app",
data: {
chocs: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
},
methods: {
addScrollBack: function(){
alert("test");
},
handlePosterClick: function(choc){
alert("ckciked")
window.top.$(".2l-body").css("overflow","hidden");
$("#cook").append(`<div style="background-color:blue;height:200px; width:300px" onclick="document.querySelector('#popover-div').remove();addScrollBack();>test</div>`);
},
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="cook">
</div>
<button v-on:click="handlePosterClick(choc)">
Book
</button>
</div>uj5u.com熱心網友回復：
不清楚，但建議是使用v-html而不是append
new Vue({
el: "#app",
data: {
cook: "Old content OR blank",
chocs: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
},
methods: {
addScrollBack: function(){
alert("test");
},
handlePosterClick: function(choc){
//alert("ckciked " choc)
// window.top.$(".2l-body").css("overflow","hidden");
// inline Scripting not recommanded,
this.cook= `<div style="background-color:blue;height:200px; width:300px" >test</div>`;
},
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="cook" v-html="cook">
</div>
<button v-on:click="handlePosterClick('choc')">
Book
</button>
</div>uj5u.com熱心網友回復：
看這個 ：
https://codepen.io/hl037/pen/QWOjwyK
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{displayDiv}}
<div id="cook">
<div
v-if="displayDiv"
style="background-color:blue;height:200px; width:300px"
v-on:click="onDivClicked"
>
test
</div>
</div>
<button v-on:click="displayDiv=true">
Book
</button>
</div>
new Vue({
el: "#app",
data: {
displayDiv:false,
chocs: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true },
],
},
methods: {
onDivClicked(){
/*document.querySelector('#popoverdiv').remove();*/
this.addScrollBack();
},
addScrollBack: function(){
alert("test");
},
handlePosterClick: function(choc){
},
}
})
...與其自己操作 dom，只需使用 vue 的模板，并使用模型控制其行為。這同樣適用于您的其他組件（彈出視窗）：它應該偵聽此組件上的自定義事件以使用反應性添加/洗掉滾動。
不建議在 vue 中使用 vanilla javascript 進行 dom 修改、事件處理等。始終使用 vue 的方式。vanilla dom 修改只能由專家完成，主要是為了與非 vue 代碼互動。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/423073.html
標籤：
上一篇：Canvas占用父div的空間