我有一組資料，其中的 url 嵌套在資料模型中。我想將資料中的 url 系結到點擊事件。現在它沒有得到確切的 url 只是變數。它應該在空白選項卡中打開資料中的 url。
new Vue({
el: "#app",
data: {
chocs: [
{ url: "https://yahoo.com"},
]
},
methods: {
myclick2: function(choc){
alert("test")
window.open(choc.url)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>
my hat
</h2>
<button v-on:click="myclick2(choc)">
my link
</button>
</div>uj5u.com熱心網友回復：
您的代碼中有多個小錯誤
首先是正確的代碼：
new Vue({
el: "#app",
data() {
return {
chocs:
{ url: "https://yahoo.com"},
}
},
methods: {
myclick2: function(){
alert("test ")
window.open(this.chocs.url, "_blank")
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>
my hat
</h2>
<button v-on:click="myclick2()">
my link
</button>
</div>錯誤串列：
- 資料部分寫為
data(){return{...}} - 在您的函式中，您正在呼叫 choc 而不是 chocs （您可以訪問資料，不要將未定義的內容作為引數傳遞）
- 因為你使用資料，你需要呼叫它
this - 根據 chocs 的結構，您在陣列中有一個物件（陣列中的第一個位置；索引 0）或根據您的評論 -> 洗掉此括號
[ ] - 如果你想打開一個新視窗，你可以添加
"_blank"
uj5u.com熱心網友回復：
您已將資料定義為名為 chocs 的陣列。包含一個帶有 url 的物件。
這將被保存如下：
cohc: [
{ url: "https://yahoo.com/" }
]
這個陣列可以包含更多的專案，但現在它只包含這一項。如果您想“打開”該專案，您可以執行以下操作：
cohcs: [
{ url: "https://yahoo.com/" }
]
console.log(cohcs[0]) // returns: { url: "https://yahoo.com/" }
0 是陣列的索引。
對于上面提供的代碼，您可以像這樣定義 v-on:click 事件：
<button v-on:click="myclick2(chocs[0])">
如果您只想保存一個鏈接。您還可以將您的資料定義為
data: {
chocs: { url: "https://yahoo.com"}
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/368815.html
標籤：Vue.js
下一篇：如何去除vue羽毛圖示