Блог

Главная - Вопросы по программированию - получить выбранный элемент при множественном выборе в компоненте vuejs

получить выбранный элемент при множественном выборе в компоненте vuejs

#vue.js #binding #multi-select

#vue.js #привязка #множественный выбор

Вопрос:

В моем компоненте у меня есть multiselect, который должен выбирать параметры при соответствующем переданном значении:

 <select class="custom-select" multiple="" v-model="items">
          <option v-for="item in objects_list" :selected="itemSelected(item)" :key="item.id" :value="item.id">
              {{item.name}}
          </option>
        </select>

…

 methods() {
  itemSelected(item) {
      let selected;
      let object_selected = this.value.filter(object => {
        console.log(object)
        if(item.id == object) {
          return true;
        }
      });
    }

похоже, что выбранная привязка не работает, как правильно реализовать multiselect для привязки выбранных параметров?

Ответ №1:

Лучший способ сделать это — использовать СОЗДАННУЮ функцию из Vue.js

 <template>
  <div>
    <select class="ur-CSS-class" multiple v-model="selected">
      <option v-for="item in objects_list" :key="item.id" :value="item.id">
        {{ item.name }}
      </option>
    </select>
    <br />
    <span>Selected : {{ selected }}</span>
  </div>
</template>

<script>
var your_list = [
  { name: "one", id: 13 },
  { name: "two", id: 18 },
  { name: "three", id: 11 },
  { name: "four", id: 7 },
  { name: "five", id: 1 },
  { name: "six", id: 2 },
];

export default {
  name: "App",
  data() {
    return {
      objects_list: your_list,
      selected: []
    };
  },
  props:{
   inputData: {
       type: Object,
       required: true
    }
  },
  computed: {
      selected() {
        let selected = this.objects_list.filter(item => {
              return this.inputData.find(i => i == item.id);
           });
        return selected;
    }
  }
};
</script>

Комментарии:

1. Спасибо за объяснения, но я хочу, чтобы selected_options были предварительно вычислены таким образом, чтобы у меня были значения, получаемые из хранилища

2. Я хотел бы вам помочь, но не могли бы вы быть более конкретными? Из того, что я понял, у вас есть список, полученный вашим магазином, затем вы получаете этот список objects_list и хотите отображать только те элементы, которые item.id равно объекту (объекту, который вы вычисляете на своей стороне). И поэтому это отображение должно быть «мгновенным». Или у вас есть текстовое поле для добавления значений в список, и они отображаются (например, ниже), только если они подтверждают ваше условие?

3. Моя цель — просто иметь список элементов и предварительно выбранных элементов из хранилища в поле multiselect

4. Думаю, я понял вашу проблему, для ее решения я использовал функцию CREATED(), которая позволяет вам сортировать (и в вашем случае предварительно выбирать) нужные вам элементы.

5. Ваше решение работает хорошо, за исключением того, что вам не нужно возвращать объект в created (), он должен быть в логике вычислений или данных