Как получить выбранные данные из v-select?

#vuejs #vuetify

У меня есть такой массив: 

my_arr: [{
  name: "Adam",
  surname: "Brown",
}, {
  name: "Bruce",
  surname: "Lee",
}, {
  name: "Erl",
  surname: "Black",
}];


Использую его в v-select, там отображаются только name:




Как мне обратиться к объекту который был выбран в меню?
 Как дальше работать с выбранными данными? Т.е. если выбрала Adam как получить в
готовом массиве Adam Brown?
    

Ответы

Ответ 1

Как мне обратиться к объекту который был выбран в меню?


В примере ниже можно обратиться как this.selected. Либо воспользоваться событием
input совместно со свойством return-object для получения массива выбранных объектов.



// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

const vuetify = new Vuetify();

const app = new Vue({
  el: '#app',

  vuetify,

  data: {
    // Модель доступных для выбора элементов.
    people: [{
      name: "Adam",
      surname: "Brown",
    }, {
      name: "Bruce",
      surname: "Lee",
    }, {
      name: "Erl",
      surname: "Black",
    }],

    // Модель выбранных элементов.
    selected: [],
  },

  methods: {
    onInput(selected) {
      console.clear();

      selected.forEach(function(item) {
        console.log({
          name: item.name,
          surname: item.surname
        });
      })
    }
  }
});
[v-cloak] {
  display: none;
}

#app {
  max-width: 600px;
  margin: 2.5rem auto;
}

  
    
      
        
          Доступные для выбора
        

        
          
        
      

      
        
          Выбранные элементы
        
        
          
{{ selected }}