小编Gre*_*ing的帖子

我们为一家人员配备公司构建了一个应用程序，管理员可以在其中查看 Vuetify 数据表中的用户。在那个表中，我们想显示用户注释，但它们有时很长并且不适合表格单元格。我们只想单击一个按钮并在对话框中打开注释。

问题是，如果我们有 200 个用户，并且我们单击按钮打开“dialogNotes”，每个用户对话框都会打开。我们如何调整我们的代码，以便只打开该用户的对话框？

<template slot="items" slot-scope="props">
                <td>
                <v-checkbox
                  primary
                  hide-details
                  v-model="props.selected"
                ></v-checkbox>
              </td>
                <td>{{props.item.status}}</td>
                <td>
          <img v-if="props.item.photoUrl" :src="props.item.photoUrl" class="user-img">
          <img v-if="!props.item.photoUrl" src="/static/avatar.png" class="user-img">
        </td>
                <td>
                <router-link v-if="props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.name }}</router-link>
        <router-link v-if="!props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.id }}</router-link>
                </td>
                <td>
                <v-btn icon color="primary" small @click.stop="dialogNote = true"><v-icon small>open_in_new</v-icon></v-btn>
                    <v-dialog v-model="dialogNote" scrollable lazy max-width="500" :key="props.item.id">
                    <v-card>
                      <v-card-title>
                        <span>{{ props.item.name }} Note</span>
                      </v-card-title>
                      <v-card-text>
                        {{props.item.note}}
                      </v-card-text>
                      <v-card-actions>
                        <v-btn color="primary" flat @click.stop="dialogNote=false">Close</v-btn>
                      </v-card-actions>
                    </v-card>
                  </v-dialog>
                </td>
                <td>{{props.item.greek}}</td>
                <td>
                <span …

我们有一个带有用户和事件的应用程序。用户申请参加工作活动。我想创建一个vuetify数据表，向用户显示他们已应用的显示以及每个显示的应用状态。

我们的Firebase数据嵌套为：事件-event.uid-应用程序-application.id（与user.uid匹配）-状态

我们的表代码：

<v-data-table
v-bind:headers="headers"
  :items="filteredEvents"
  :rows-per-page-items="[10,25, { text: 'All', value: - 1}]"
>
<template slot="items" slot-scope="props">
    <td>{{ props.item.title }}</td>
    <td>{{ props.item.city }}</td>
    <td>{{ props.item.startDate | moment("dddd, MMMM Do YYYY") }}</td>
    <td>{{ props.item.applicants.match(user.id).status }}</td>
</template>
</v-data-table>

申请人身份td是我们希望显示“待定”或“已接受”的位置。那里的代码不起作用。我希望它能那样工作，但事实并非如此。

计算：

filteredEvents(){
  return this.$store.getters.loadedEvents.filter((event) => {
    return this.$store.getters.isUserApplied(event.id);
   })
}

Vuex：

getInitialEventsState({ commit }) {
  let db = firebase.database();
  db.ref("/events").on("value", function (snapshot) {
    let data = []
    for (var key in snapshot.val()) {
      let event = snapshot.val()[key];
      event.id = key
      data.push(event)
    }
    commit("setLoadedEvents", …

我正在尝试在vuetify select组件中显示“位置”，但是我当前的代码呈现“ [object Object]”而不是位置1，位置2等。

我的选择组件：

<v-select
:items="locations"
v-model="location"
label="Choose Location"
bottom
autocomplete
></v-select>

地点：

locations () {
  return this.$store.getters.getLocationsForEvent(this.event.id)
}

Vuex Getter：

getLocationsForEvent: (state) => (id) => {
  return state.loadedLocations.filter(function (location) { 
    return location.eventId === id; 
  });
}

这是位置数据的屏幕截图：

谢谢！