我是 Vue js 的新手。我正在嘗試為 API 的其余部分做一個動作表單。我不知道如何僅獲取名稱和位置的資料。我試圖在陣列中使用切片，但它不起作用。
我的行動形式：
<div class="form-group">
<label class="required"> Social Media </label>
<b-form-checkbox v-for="event in events" :key="event._id" :value="event" v-model="selected">
{{event.name}}, {{event.location}}
</b-form-checkbox>
<span class="mt-3">Selected: <strong>{{ selected }}</strong></span>
</div>
我的 Vue 實體
export default {
data() {
return {
events: [{
"_id": "d4d81da6-b453-4a31-999f-a2ea04848ee9",
"name": "A",
"location": "US",
"__v": 0
},
{
"_id": "91205d34-4480-4e4e-bdf7-fe66e46922b0",
"name": "B",
"location": "Korea",
"__v": 0
},
{
"_id": "0b168c44-4f38-4f86-8ee6-e077333aca95",
"name": "C",
"location": "Japan",
"__v": 0
}],
selected: ''
};
}
}
檢查復選框的第一個選項時的輸出：
Selected: ["_id": "d4d81da6-b453-4a31-999f-a2ea04848ee9", "name": "A", "location": "US", "__v": 0]
檢查復選框的第一個選項時的預期輸出：
Selected: [ "name": "A", "location": "US" ]
uj5u.com熱心網友回復：
您可以在:value=""分配中創建必要的結構。
<b-form-checkbox v-for="event in events" :key="event._id" :value="{ name: event.name, location: event.location }" v-model="selected">
{{event.name}}, {{event.location}}
</b-form-checkbox>
uj5u.com熱心網友回復：
首先制作Selected:false布林值...然后制作一個按鈕并點擊它會進入一個接受引數的函式，迭代你的陣列并選擇一個與引數匹配的物件
private selectFun(item){this.events.filter(val=>{val._id===item._id})//and then whatever}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344814.html
標籤：javascript 数组 Vue.js 复选框列表