[英]Need To Access an Array of Objects with Vue.js
當用戶選擇機器時,我得到機器的 id。 我需要從那個 id 中獲取機器的品牌和型號。
<ul class="list-unstyled">
<li>
<div v-for="dosimeter in dosimeters">
<label>
<input type="radio" name="optDosimeter" v-model="dosimeter_id" :value="dosimeter.id" v-on:click="dosimeter_select">{{dosimeter.nickname}}
</label>
</div>
</li>
</ul>
Vue.js
export default {
data: function() {
return {
dosimeters:[],
dosimeter_id:''
}
},
mounted(){
axios.get('/dosimeters').then((response) => {
this.dosimeters=response.data;
});
},
methods: {
dosimeter_select(){
not sure what to put here
}
}
}
我認為你應該做這樣的事情:
dosimeter_select(){
let found= this.dosimeters.find(d=>{
return d.id==this.dosimeter_id
});
console.log(found.make);
console.log(found.model);
}
嘗試這個
dosimeter_select()
{
let machine = this.dosimeters.find(dosimeter => dosimeters.id===this.dosimeter_id);
// now you have the machine object
}
它應該工作:
new Vue({ el: "#app", data: { dosimeters:[ { id: 1, name: 'foo' }, { id: 2, name: 'bar' } ] }, methods: { dosimeterSelected (selectedDosimeter) { console.log(`i doing something with dosimeter.id: ${selectedDosimeter.id}`) } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ul class="list-unstyled"> <li v-for="dosimeter in dosimeters"> <div> <label> <input type="radio" name="optDosimeter" :value="dosimeter.name" v-on:click="dosimeterSelected(dosimeter)">{{dosimeter.name}} </label> </div> </li> </ul> </div>
我做了一些改變,現在它可以工作了。 我使用了 Boussadjra Brahim 的建議:
dosimeter_select(){
let found= this.dosimeters.find(d=>{
return d.id==this.dosimeter_id
});
console.log(found.make);
console.log(found.model);
}
我沒有使用單選按鈕,而是將其設為下拉列表。 此外,我沒有使用 @click 觸發該方法,而是使用了 @change。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.