[英]How to read data from a v-for (vue.js)?
給定下一個 v-for:
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" @click="getData(result)" >Details</a>
</div>
</div>
</div>
</div>
</div>
下一個 Vue.js 腳本:
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
methods: {
getData: function(result){
window.alert($(this).parents("#networdapp").find(".card-header.text-center").outerHTML);
window.alert(document.getElementsByClassName("card-header").outerHTML);
window.alert(result.outerHTML);
}
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
</script>
我想從特定迭代中獲取數據,假設我從 v-for 中單擊第 3 個 div 的“詳細信息”按鈕,我想從第 3 個 for 中獲取 {{result.title }} 數據。是否可能?我一直在閱讀 Vue.js 文檔,但我沒有找到任何關於從 DOM 讀取數據的信息。如果不可能,那么沒有 Vue.js 我怎么能做到這一點?還有其他選擇嗎? 主要目標是獲取這些數據並將其放入一個 js 對象中,並將其傳遞給另一個網頁。
您必須傳遞索引鍵並使用 is 從results的位置獲取。
將 for 循環 div 更改為
<div v-for="(result,i) in results" :key="i" class="col-sm-6" >
也改變方法參數
<a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
並且該方法將獲取索引鍵,在這里我使用控制台查看了您想要的 result.title。 你可以隨心所欲地使用它。
getData: function(key){
console.log(this.results[key].title)
}
所以給定下一個 v-for:
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="(result,i) in results" :key="i" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
</div>
</div>
</div>
</div>
下一個 Vue.js 腳本:
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
methods: {
getData: function(key){
console.log(this.results[key].title)
}
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
要在結果數組中獲取要訪問的數據,可以在 v-for 循環中使用索引
v-for="(result, index) in results"
你可以在這里查看文檔https://v2.vuejs.org/v2/guide/list.html
我也強烈建議你在 v-for 之后添加一個 key 屬性來幫助 vue.js 跟蹤每個結果,請參閱https://v2.vuejs.org/v2/guide/list.html#key
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.