drop-down-menuvue-componentvuejs3vue-select

Vue 3 select component how to bind 2 attributes to 2 v-model


So lets say i have a data - news: {id:3, name:"book", author:'author'}. And select with options: {id: 1, book: "book1"}, {id: 2, book: "book2"} .

Now i want to v-bind options with news.id and news.book Is there a way of doing it or ready component for this?


Solution

  • <select v-model="selected">
      <option v-for="option in options" :value="option.id">
        {{ option.name}}
      </option>
    </select>
    
      data() {
        return {
          selected: 1,
          options: [
            { name: 'book1', id: 1 },
            { name: 'book2', id: 2 },
            { name: 'book3', id: 3 }
          ]
        }