V-for不适用于模板中的动态数据

由 jquia发布于 2020-05-18 01:56:24

我的模板如下：

 <ul id="example-1">
        <li v-for="item in getMenus" :key="item.id">
          {{ item.name }}
        </li>
      </ul>

methods:{
 async getMenus() {
      this.$axios.setHeader('Content-Type', 'application/json', ['get'])
      this.$axios.setHeader(
        'Authorization',
        'Bearer ' + this.$store.state.auth.Token
      )

      const roleId = this.$store.state.auth.role.roleId
      const url = `/role/${roleId}/menu`
      let data = ''
      // eslint-disable-next-line vue/no-async-in-computed-properties
      const pal = await this.$axios
        .$get(url, JSON.stringify(roleId))
        .then(function(resp) {
          data = resp.data
        })
      if (pal) {
        // eslint-disable-next-line no-console
        console.log('hi')
      }
      return data
    }

} }

上面提到的是我的代码。我检查了api的重试数据。如果我直接将我的数据作为经过编码的值，那么它将起作用，如果我使用api，则它将不起作用。我期待dinto控制台也很清楚。我是vue的新手。任何帮助将不胜感激。

苦涩占内心 2020-05-18 01:56:24

You can't use async methods in v-for. Define an array in data section of a component and write results in the array at the end of getMenus function. You should call getMenus at some place in your code (for instance in mounted hook):

<li v-for="item in menuList" :key="item.id">
...
// in a component code
data: {
  return {
    menuList: []
  }
},
mounted () {
  // if you don't have any initialization after this call you can call it without await
  getMenus()
},
methods:{
 async getMenus() {
   ...
   // getting results
   const { data: menuList } = await this.$axios
        .$get(url, JSON.stringify(roleId))
   this.menuList = menuList
}

维她命 2020-05-18 01:56:24

This happens because inside async getMenus method you are returning data before it is even assigned a value. A better way to resolve this issue would be to set a variable in data options like:

data() {
  return {
    loading: false,
    items: []
  }
},

and inside getMenus update items array like:

created() {
   this.getMenus();
},
methods: {
  async getMenus() {
    this.loading = true;
    this.$axios.setHeader('Content-Type', 'application/json', ['get'])
    this.$axios.setHeader(
      'Authorization',
      'Bearer ' + this.$store.state.auth.Token
    )

    const roleId = this.$store.state.auth.role.roleId
    const url = `/role/${roleId}/menu`
    // eslint-disable-next-line vue/no-async-in-computed-properties
    await this.$axios
      .$get(url, JSON.stringify(roleId))
      .then(resp => {
        this.loading = false;
        this.items = resp.data;
      })
      .catch(error => {
        this.loading = false;
        console.log(error);
      })
  }
}

然后像这样更新您的模板：

<li v-for="item in items" :key="item.id">
    {{ item.name }}
</li>

万一您的异步方法需要一些时间才能完成，您可以显示正在加载的文本或图标，以便用户知道至少正在发生某些事情，而不是查看空白屏幕，例如：

<template v-if="loading">
  Loading...
</template>

<template v-else>
  <ul id="example-1">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

jquia

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3287
注册排名
1487