3

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

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

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

<v-select
  v-if="my_arr"
  class='multi_drop'
  :items="my_arr"
  item-text="name"
  item-value="surname"
  label="Select"
  multiple
></v-select>

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

0

1 ответ 1

3

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

В примере ниже можно обратиться как 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;
}
<div id="app" v-cloak>
  <v-app>
    <v-container fluid>
      <v-row align="center">
        <v-col cols="6">
          <v-subheader>Доступные для выбора</v-subheader>
        </v-col>

        <v-col cols="6">
          <v-select
            @input="onInput"
            :items="people"
            v-model="selected"
            item-text="name"
            item-value="surname"
            label="Выберите"
            return-object
            multiple
          ></v-select>
        </v-col>
      </v-row>

      <v-row align="center">
        <v-col cols="6">
          <v-subheader>Выбранные элементы</v-subheader>
        </v-col>
        <v-col cols="6">
          <pre>{{ selected }}</pre>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

3
  • А как указать модель только для текущего меню? Просто если этих меню на странице больше чем 1 штука, выбранные элементы показываются во всех меню. Хотя я выбирала эти элементы только в первом из них. 6 ноя 2019 в 13:25
  • Вывожу в таблице через v-data-table в template 6 ноя 2019 в 13:30
  • Уже оформила новый вопрос (questions/1043048) 6 ноя 2019 в 13:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.