Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

bfj5889's avatar

Binding Object to V-Select

I have a table with two columns(Location and Users). The location is static information but the users is a multi-select using [Vue-Select][https://github.com/sagalbot/vue-select]. I need to shows users currently selected for a location on page load. I grab that information from a database. I also need to be able to change the selected users of a location by using a multi-select that shows all users. [Example Mock][https://imgur.com/VHTP5EY]

Vue Outline

<table>
    <thead>
    <tr>
        <th class="col-xs-2">Locations</th>
        <th class="col-xs-8">Users</th>
    </tr>
    </thead>
    <tbody>
        <tr v-for="(row, index) in rows" v-bind:key="index">
            <td>
            <v-select v-model="row.location"></v-select>
            </td>
            <td>
                <v-select multiple v-model="row.users">
                <option v-for="user in allUsers" :key="user.id" :value="user.id">{{ user.name }}</option>
                </v-select>
            </td>
        </tr>
    </tbody>
</table>

Vue

var app = new Vue({
    el: '#el',
    data() {
        return {
          errors: [],
          loading: false,
          rows: this.assignments,
          allUsers: this.users
        }
    },
   props: {
     assignments: Array,
     users: Array
   },
})

Example of how rows are returned from database

    [{
    "locations":[
      { "id":1,
        "name":"SomePlace, CA",
        "users": [
          {"id":1, "name":"Person One"},
          {"id":2, "name":"Person Two"}
        ]
      },
      { "id":2,
        "name":"AnotherPlace, CA",
        "users": [
          {"id":3, "name":"Person Three"}
        ]
      }
    ]
  },
  {
    "locations":[
      { "id":1,
        "name":"SomePlace, CA",
        "users": [
          {"id":1, "name":"Person One"},
          {"id":2, "name":"Person Two"}
        ]
      },
      { "id":2,
        "name":"AnotherPlace, CA",
        "users": [
          {"id":3, "name":"Person Three"}
        ]
      }
    ]
  }]

Example of how all users are returned from the database

[
    ["id":1, "name":"Person One"],
    ["id":2, "name":"Person Two"],
    ["id":3,"name":"Person Three"],
]
0 likes
0 replies

Please or to participate in this conversation.