我想顯示串列中的資料。串列中的資料正在函式內更新。實際上我只想在執行該函式后顯示資料。
這是我的模板代碼。
<div class="modal-body">
<td>{{shopName}}</td>
</div>
這是我的腳本。
<script>
export default {
name: "ViewShop",
props:{
shops:Object
},
data(){
return{
shopName:[],
}
},
methods:{
async shopd(sid){
this.shopName=this.shops;
console.log(this.shopName) // This prints the data in the console
}
}
};
</script>
我想在執行函式后在我的模板中列印 shopName 的值 shopd()
我認為在執行函式之前shopName在模板中訪問。所以，我需要的是它應該等到功能做出一些改變的shopName，然后它才能訪問到的模板。
uj5u.com熱心網友回復：
為此，您將需要一個輔助變數：
<script>
export default {
name: "ViewShop",
props:{
shops:Object
},
data(){
return{
shopName:[],
showShopName: false,
}
},
methods:{
async shopd(sid){
this.shopName = this.shops;
this.showShopName = true;
}
}
};
</script>
然后在您的模板上：
<div class="modal-body">
<td>{{ showShopName ? shopName : "" }}</td>
</div>
uj5u.com熱心網友回復：
您可以使用 v-if 指令。在滿足 v-if 條件之前， v-if 中的 html 不會成為 dom 的一部分。
<div class="modal-body" v-if="shopName.length>0">
<td>{{shopName}}</td>
</div>
不確定 shopName 是陣列還是字串，條件可能會相應改變。你可以從檔案中了解條件渲染：https : //vuejs.org/v2/guide/conditional.html
uj5u.com熱心網友回復：
現在，我不知道您是否需要一個陣列作為型別或只是一個簡單的字串。但是在模板中你可以做到這一點。如果將變數 shopName 的型別更改為 null 并使用 v-if 指令隱藏該元素。
<div class="modal-body" >
<td v-if=shopName !== null>{{shopName}}</td>
</div>
https://vuejs.org/v2/guide/conditional.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402900.html
標籤：
上一篇：如何將vue-select與b-pagination一起使用？
下一篇：使用vuejs更改變數的值