我有一個在螢屏上附加資料的 vuejs 方法。我的問題是，我想使用 v-for 將陣列中找到的所有專案附加到螢屏上，而不是僅通過索引過濾的專案？
new Vue({
el: "#app",
data: () => ({
chocs:[{"title":'a man tale'}, {"title":'a boy tale'},{"title":'a mermaid tale'},{"title":'a dog tale'}]
}),
methods: {
handleTileClick: function(){
$("#fox").append(`<div id="popover-dialog">data here: ${this.chocs.title}</div>`
);
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<button v-on:click="handleTileClick()">Click Me</button>
<div id="fox" v-for="choc in chocs"></div>
</div>uj5u.com熱心網友回復：
檢查下面的代碼
var app = new Vue({
el: '#app',
name: "App",
data: () => ({
showList: false,
chocs: [
{ title: "a man tale" },
{ title: "a boy tale" },
{ title: "a mermaid tale" },
{ title: "a dog tale" },
],
}),
methods: {
handleTileClick: function () {
this.showList = true;
},
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<button v-on:click="handleTileClick">Click Me</button>
<div id="fox" v-if="showList">
<div id="list-item" v-for="(choc, index) in chocs" :key="index">{{ choc.title }}</div>
</div>
</div>uj5u.com熱心網友回復：
您可以先隱藏元素并在單擊click Me按鈕后顯示它們：
現場演示
<div id="fox" v-if="isShowing">
<div id="popover-dialog" v-for="choc in chocs" :key="choc.title">
data here: {{ choc.title }}
</div>
</div>
data并methods作為：
export default {
name: "App",
data: () => ({
isShowing: false,
chocs: [
{ title: "a man tale" },
{ title: "a boy tale" },
{ title: "a mermaid tale" },
{ title: "a dog tale" },
],
}),
methods: {
handleTileClick: function () {
this.isShowing = true;
},
},
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/364156.html
標籤：javascript Vue.js