Выберите поле внутри таблицы buefy в vue - PullRequest
Новая
       47

Выберите поле внутри таблицы buefy в vue

1 голос
/ 27 апреля 2020

Итак, у меня есть настроенная таблица buefy, которая извлекает данные из firebase. 

<b-table :data="users" :columns="columns"></b-table>

Кажется, все работает нормально. В «обычной» таблице я мог бы добавить в свой столбец select (чтобы изменить роль пользователя) с помощью @ click 

<td data-label="name">{{ user.email }}</td>
<td>
  <b-field label="Select a Role">
    <b-select @change.native="changeRole(user.id, $event)" placeholder="Select Role">
        <option :selected="user.role.driver" value="driver">Driver</option>
        <option :selected="user.role.customer" value="customer">Customer</option>
    </b-select>
  </b-field>
</td>

Однако я совершенно не уверен, как этого добиться в таблице buefy. , У кого-нибудь есть идеи как этого добиться? В моем экспорте по умолчанию у меня в настоящее время есть 

data() {
            return {
                users: [],
                user: null,
                columns: [
                    {
                        field: 'id',
                        label: 'ID',
                        width: '40',
                        numeric: true
                    },
                    {
                        field: 'email',
                        label: 'Email',
                    },
                    {
                        field: 'role',
                        label: 'Role',
                    },
                    {
                        field: 'select',
                        label: 'Select Role', //used for testing/doesnt work
                    },
                ]

            }
        },

Обновление

Поэтому я переключился на vue и встал и запустить снова (nuxt был немного ограничен в том, что я на самом деле хотел сделать sh), но все еще испытывает головную боль с полями выбора внутри таблицы buefy. Эта таблица находится в представлении администратора, поэтому администратор может изменить роль пользователя.

Я наткнулся на использование b-table-column & props и подумал, что смогу достичь того, чего хочу. Тем не менее, на всю жизнь я не вижу, как это сделать.

Моя таблица: 

            <b-table :data="isEmpty ? [] : users">
                <template slot-scope="props">

                    <b-table-column field="email" label="User Email">
                        {{ props.row.email }}
                    </b-table-column>

                    <b-table-column field="role" label="Access Level">
                        select field goes here

                    </b-table-column>


                </template>
            </b-table>

У меня есть коллекция firebase (ролей), которую я связываю с зарегистрированными пользователями uid, который отлично работает, поэтому я возвращаюсь: 

    userid: "uniqueid"
    email: "test@email.com"
    role: (basic: true)

Теперь мне нужно передать эти данные в поле выбора, чтобы я мог редактировать роль пользователя с помощью @change в vue ie: 

<select @change="changeRole(user.id, $event)">
   <option :selected="user.role.basic" value="basic">Basic</option>
   <option :selected="user.role.gold" value="gold">Gold</option>
   <option :selected="user.role.diamond" value="Diamond">Diamond</option>
</select>

В моем js в настоящее время у меня есть следующее, которое выдвигает роль в указанного пользователя c. 

this.users = [];
        firebase
            .firestore()
            .collection("roles")
            .get()
            .then(snap => {
                snap.forEach(doc => {
                    var user = doc.data();
                    user.id = doc.id;
                    console.log(doc.data());
                    if (!user.role.admin) this.users.push(user);
                });

Я не совсем уверен, возможно ли это, но если у кого-то есть какие-либо мысли, я буду признателен.

...