Multiselect only renders the first two items

Question

I want to use the multi select component and put this into a single file component

<template>
  <v-select
    :items="maskItem.values"
    item-text="display"
    item-value="value"
    :label="maskItem.fieldTitle"
    multiple
    chips
    return-object
    @input="onSelectedItemsUpdated"
  ></v-select>
</template>

<script>
export default {
  props: {
    maskItem: {
      type: Object,
      required: true
    }
  },
  methods: {
    onSelectedItemsUpdated: function(newItems) {
      this.$emit("selectedItemsUpdated", newItems);
    }
  }
};
</script>

This component should render a specific amount of items and fire an event with all the updated values. When I pass in these values

values: [
          {
            display: "Read",
            value: true
          },
          {
            display: "Write",
            value: false
          },
          {
            display: "Delete",
            value: false
          }
        ]

only the first two items are rendered. So I can place "Delete" before "Read" and "Write" will not get rendered.

I created an example to reproduce the problem

https://codesandbox.io/s/multiselect-hzu3z

Answer 1

That's because you have duplicate value in two objects (i.e. "Write" and "Delete" have false value).

Make values unique (arbitrary values, as long as they are unique):

values: [
  {
    display: "Read",
    value: 1
  },
  {
    display: "Write",
    value: 2
  },
  {
    display: "Delete",
    value: 3
  }
]

---

Note that native select also behaves like that:
https://codepen.io/anon/pen/YoLxVr