Question

我有一个包含两列（位置和用户）的表。该位置是静态信息，但用户使用Vue-Select是多选。我需要显示当前在页面加载中选择用于某个位置的用户。我从数据库中获取该信息。我还需要能够通过使用显示所有用户的多重选择来更改位置的选定用户。 Example Mock

Vue大纲

<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>
              <span>{{ row.location }}</span>
            </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
   },
})

如何从数据库返回行的示例

    [{
    "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"}
        ]
      }
    ]
  }]

如何从数据库返回所有用户的示例

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

Answer 1

由于您的props属性具有一个包含rows数组的项目，因此我将通过locations的数据直接移到了数据对象，因此我循环浏览了第一项{{1} }，然后将rows[0]作为选择选项row，并在第二列中循环浏览:options="row"的用户：

selectedLocation

Vue.component('v-select', VueSelect.VueSelect)

var app = new Vue({
  el: '#app',
  data() {
    return {
      errors: [],
      loading: false,
      rows: [{
          "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"
              }]
            }
          ]
        }
      ],
      allUsers: this.users
    }
  },
  props: {
    assignments: Array,
    users: Array
  },
})

要进行演示，请检查此code

Answer 2

我认为提供给“行”变量的样本数据丢失了。

因此，我在这里进行一个假想的假设，即您有一些分布在多个位置的Web服务器，并且您想管理用户的访问权限。

以下是我对“行”变量的虚构数据，该数据与您的数据足够接近：

[
{
    "serverID": 1,
    "serverName": "My Backend API Server",
    "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" }]
    }
    ]
},
{
    "serverID": 1,
    "serverName": "My Frontend App Server",
    "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数组，以使某些东西接近您的模拟对象，如下所示：

选中此pen进行实施。

JS代码：

Vue.component('v-select', VueSelect.VueSelect)

let servers = [
    {
        "serverID": 1,
        "serverName": "My Backend API Server",
        "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" }]
        }
        ]
    },
    {
        "serverID": 1,
        "serverName": "My Frontend App Server",
        "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" }]
        }
        ]
    }
    ];

let users = [
    {"id":1, "name":"Person One"},
    {"id":2, "name":"Person Two"},
    {"id":3,"name":"Person Three"},
];

var app = new Vue({
    el: '#app',
    data() {
        return {
        errors: [],
        loading: false,
        selectedLocation: {},
        rows:  servers,
        allUsers: users
        }
    }
})

HTML代码：

<div id="app">
<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 colspan="2">
            <b>{{ row.serverName }}</b>
            <table>
                <tr  v-for="(location, l_index) in row.locations" v-bind:key="l_index">
                    <td class="col-xs-2">{{ location.name }}</td>
                    <td class="col-xs-8">
                    <v-select multiple v-model="location.users" label="name" :options="allUsers">
                </v-select>
                    </td>
                </tr>
            </table>
            </td>

            <td class="lead-locations">
            {{ row.locations.name }}          
            </td>
            <td class="lead-users">

            </td>
        </tr>
    </tbody>
</table>
</div>

将对象绑定到Vue多选

2 个答案: