Vuetify에서 자주 사용하는 Javascript 칩스

v-select의 items는 배열만

게다가 text/value라는 key의 지정 첨부.
하지만 API에서 가져온 데이터는 객체의 경우.

가져온 데이터

api_data = {
 "id1":"hoge",
 "id2":"huga",
 "id3":"hogehoge",
}

을

select_items = [
 {
  text: "hoge",
  value: "id1"
 },
 {
  text: "huga",
  value: "id2"
 },
 {
  text: "hogehoge",
  value: "id3"
 }

하는 상황의 경우.

select_items = Object.keys(api_data).map( key => {
 return {
  text: api_data[key],
  value: key
 }
});

for in을 사용하면

let select_itemse = [];
for(var key in api_data){
 select_itemse.push({
  text: api_data[key],
  value: key
 })
}

개인적으로는 map을 사용하는 것이 알기 쉽지만, for in은 다른 언어를 만지고 있는 사람에게는 알기 쉽다고 생각한다.

키가 다른 경우

아래와 같은 데이터의 경우

api_data = [
 {
  "id":"id1",
  "title":"hoge"
 },
 {
  "id":"id2",
  "title":"huga"
 },
 {
  "id":"id3",
  "title":"hogehoge"
 }
}

item-text,item-value 속성을 사용합니다.

<v-select 
 items="api_data"
 item-text="title"
 item-value="id"
/>