Vuetify Select 입력으로 어레이 데이터를 로드하는 방법

Vuetify Select 입력으로 어레이 데이터를 로드하는 방법

나는 선택 컴포넌트로 "로케이션"을 표시하려고 하는데, 현재 코드는 위치 1, 위치 2 등이 아닌 "[객체 객체]"를 렌더링한다.

선택한 구성 요소:

<v-select
:items="locations"
v-model="location"
label="Choose Location"
bottom
autocomplete
></v-select>

위치:

locations () {
  return this.$store.getters.getLocationsForEvent(this.event.id)
}

Vuex Getter:

getLocationsForEvent: (state) => (id) => {
  return state.loadedLocations.filter(function (location) { 
    return location.eventId === id; 
  });
}

위치 데이터의 화면샷:

고마워!

사용자 지정 개체의 경우item-text. Theitem-text각 옵션의 표시 여부.

예를 들어, 스크린샷에서,title가능한 속성:

<v-select
:items="locations"
v-model="location"
label="Choose Location"
item-text="title"
bottom
autocomplete
></v-select>

아래 데모.

없는item-text:

new Vue({
  el: '#app',
  data () {
    return {
      location: null,
      locations: [
        { id: "1111", manager: 'Alice',  title: 'Water Cart 1' },
        { id: "2222", manager: 'Bob',    title: 'Water Cart 2' },
        { id: "3333", manager: 'Neysa',  title: 'Water Cart 3' }
      ]
    }
  }
})

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.js'></script>

<div id="app">
  <v-app>
    <v-container>
      <v-select
        :items="locations"
        v-model="location"
        label="Choose Location"
        bottom
        autocomplete
        >
      </v-select>
    </v-container>
  </v-app>
</div>

와 함께item-text:

new Vue({
  el: '#app',
  data () {
    return {
      location: null,
      locations: [
        { id: "1111", manager: 'Alice',  title: 'Water Cart 1' },
        { id: "2222", manager: 'Bob',    title: 'Water Cart 2' },
        { id: "3333", manager: 'Neysa',  title: 'Water Cart 3' }
      ]
    }
  }
})

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.js'></script>

<div id="app">
  <v-app>
    <v-container>
      <v-select
        :items="locations"
        v-model="location"
        label="Choose Location"
        item-text="title"
        bottom
        autocomplete
        >
      </v-select>
    </v-container>
  </v-app>
</div>

낮은 레벨의 시계를 가지고 있도록 시계에 부착. 물체의 배열

watch: {
    groupInfo: function(groupInfo) {
      if (groupInfo.teams !== undefined) {
        var newArray = [];
        for (var key in groupInfo.teams) {
          var obj = groupInfo.teams[key];
          newArray.push(obj);
        }
        console.log("wagwan" newArray)
        this.teams = newArray;
      }
    }
  },

참조URL: https://stackoverflow.com/questions/49469589/how-to-load-array-data-into-vuetify-select-input