Question

我正在尝试使用服务器中的用户填充vuebootstrap表。我这样进行了api调用：

export function getUsers() {
  const a = request({
    url: 'http://localhost:8000/users/',
    method: 'get'
  })
  console.log('getUsers request: ', a)
  return a 
}

我将其包装在const中只是为了进行调试。

控制台上的输出为：

getUsers request:  Promise {<pending>}

在我得到的诺言中，

users:  (15) [{…}, {…}, {…}, {…}...,

因此，呼叫确实有效。在表的脚本中（我需要在其中显示这些数据），我做了：

import { getUsers } from '@/api/user'
data() {
    return {
      users: [],
      fields: [ 'utente', 'email', 'stato', 'iscritto_il', 'ultimo_accesso', 'operazioni' ]
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    async fetchUsers() {
      await getUsers().then((response) => this.users = response.results)

      .catch((error) => console.log('ERROR: ', error.message))

      console.log('users: ', this.users)
      console.log('response: ', this.response)
    },

控制台上的输出：

users:  (15) [{…}, {…}, {…}, {…}, {…},..., __ob__: Observer]
index.vue:57 response:  undefined

在模板中，我做了：

<div>
    <app-container title="Lista utenti" />
      <b-table
        :items="users"
        :fields="fields"
        class="mx-2 py-1 tbl-user-list"
      >
      <template 
        v-for="(user, index) in users"
        slot-scope="row"
      >
        {{ row.user.username }}
        {{ row.user.email }}
        {{ row.user.is_active }}
        {{ row.user.date_joined }}
        {{ row.user.last_login }}
      </template>
      <template slot="operazioni">
        <b-button-group class="my-1">
          <b-button variant="success" class="p-2" @click="vediAttivita">Vedi Attività</b-button>
          <b-button variant="info" class="p-2" @click="vediProfilo">Vedi Profilo</b-button>
          <b-button variant="warning" class="px-2 mr-1 py-1" @click="modificaProfilo">Modifica Profilo</b-button>
        </b-button-group>
      </template>
    </b-table>
  </div>

奇怪的是，只显示了电子邮件（如果需要，还显示了操作模板），而没有其他显示。如何获得电子邮件（但是，如果我在console.log中也收到未定义的电子邮件）？

感谢任何可以给我一些提示的人。

我检查了网络上的所有地方，可以看到这是一个常见问题，因此可以看作是重复问题，但是我尝试了所有解决方案，但没有一个对我有用。我尝试以任何可能的方式尝试响应以及数据，在尝试使用它们之前尝试定义它们，但是仍然无法定义。

我读到.then和async wait不应一起使用，但是如果我删除了async wait，我不会让users []满，我得到：

users:  [__ob__: Observer]

Answer 1

如果在函数内部使用request，则应使用acync-await或带有promise的回调函数：

export function getUsers() {
  return new Promise((resolve, reject) => {
     request({
      url: 'http://localhost:8000/users/',
      method: 'get'
     }, function(err, response, body) {
      if(err) {
      reject(err)
    }
    console.log("response: ", response)
    console.log("body: ", body)
    resolve(body)
  })
 })
}

在您的方法中，应该像这样：

async fetchUsers() {
      try {
          const result = await getUsers();
          this.users = result //or result.data
          console.log('users: ', this.users)
          console.log('response: ', result)
      } catch(err) {
          console.log(err)
      }
    },

另外，由于用户数据要通过async来发送，因此最好用v-if包装b表：

<b-table v-if="users && users.length > 0"
        :items="users"
        :fields="fields"
        class="mx-2 py-1 tbl-user-list"
      >
      <template 
        v-for="(user, index) in users"
        slot-scope="row"
      >
        {{ row.user.username }}
        {{ row.user.email }}
        {{ row.user.is_active }}
        {{ row.user.date_joined }}
        {{ row.user.last_login }}
      </template>
      <template slot="operazioni">
        <b-button-group class="my-1">
          <b-button variant="success" class="p-2" @click="vediAttivita">Vedi Attività</b-button>
          <b-button variant="info" class="p-2" @click="vediProfilo">Vedi Profilo</b-button>
          <b-button variant="warning" class="px-2 mr-1 py-1" @click="modificaProfilo">Modifica Profilo</b-button>
        </b-button-group>
      </template>
    </b-table>

Answer 2

问题确实与vuejs正确呈现表有关。我做了什么：

<b-table
     :fields="fields"
     :items="users"
     v-if="users && users.length > 0"
     class="mx-2 py-1 tbl-user-list"
     >
    <tbody> 
      <template slot="utente" slot-scope="data">{{ data.item.username }}</template>
      <template slot="stato" slot-scope="data">{{ data.item.is_active }}</template>
      <template slot="operazioni">
        <b-button-group class="my-1">
          <b-button
            variant="success"
            class="p-2"
            v-b-tooltip.hover title="Vedi attività utente"
            @click="vediAttivita"
          >
            <span class="svg-container">
              <svg-icon icon-class="eye-open" />
            </span>
          </b-button>
          <b-button
            variant="info"
            class="p-2"
            v-b-tooltip.hover title="Vedi profilo utente"
            @click="vediProfilo"
          >
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
          </b-button>
          <b-button
            variant="warning"
            class="px-2 mr-1 py-1"
            v-b-tooltip.hover title="Modifica profilo utente"
            @click="modificaProfilo"
          >
            <span class="svg-container">
              <svg-icon icon-class="edit" />
            </span>
          </b-button>
        </b-button-group>
      </template>
  </tbody>

在脚本中，我以不同的方式定义了字段。 键是用于获取数据的字段，标签是显示的字段。

fields: [
  { key: 'username', label: 'utente' },
  { key: 'email', label: 'email'}
  { key: 'is_active', label: 'stato'}
  { key: 'date_joined', label: 'iscritto_il'}
  { key: 'last_login', label: 'ultimo_accesso'}
]

那行得通！答案来自vuejs论坛，这里是链接：https://forum.vuejs.org/t/template-is-acting-weird-with-v-for-directive/71378/4 感谢所有花时间解决它的人。

axios获取响应未定义

2 个答案: