无法绑定v-for中函数的值返回？

Question

我无法将函数返回值与dom绑定。 我想显示＆＃34;没有数据 - DOM＆＃34;如果函数isNoStatuses（id，index）在v-for element中返回true，则不应显示。 你可以参考下面的代码。我正在使用vuejs2。

我只想在v-for时获得状态。 v-for元素应根据状态显示dom。

以下是我的示例代码：

    <div class="row gutter wrap justify-stretch" v-for="(row, index) in items">
      <div>{{row.name}}</div> <!-- display data -->
      <!-- if data not available i.e isNoStatuses(id,index) return true display below-->
      <div v-if="isNoStatuses(row.id,index) === true">
        <div class="card">
          <div class="card-content">
            <i class="material-icons">error</i> Oops! content not found!
          </div>
        </div>
      </div>
    </div>
    <script>
    import appService from 'service'
    export default {
      data () {
        return {
          searchedTopic: '',
          items: [{id: 1, name: 'abc'}, {id: 2, name: 'xxabc'}, {id: 3, name: 'dabsc'}],
          noMoreData: false
        }
      },
      methods: {
        logout () {
          appService.logout()
        },
        isNoStatuses (idStr, i) {
          appService.getstatus(idStr).then((resp) => {
            var res = resp.data
            console.log('get res: ' + JSON.stringify(res))
            if (res.success === 1) {
              return false
            }
            else {
              return true
            }
          }).catch((e) => {
            console.log('error while getting : ' + JSON.stringify(e))
          })
        },
      created () {
        appService.checkAuth()
      },
      components: {

      },
      mounted () {

      }
    }
    </script>
---
i have also tried like this: the status will be taken after mounted and response status will be store in status[]. 

    ..
   <div class="row gutter wrap justify-stretch" v-for="(row, index) in items">
    <div>{{row.name}}</div> <!-- display data -->
      <!-- if data not available i.e isNoStatuses(id,index) will set status[index] true display below-->
    <div v-if="status[index] === true">
      <div class="card">
        <div class="card-content">
          <i class="material-icons">error</i> Oops! content not found!
        </div>
      </div>
    </div>
    ..
    <script>
    import appService from 'service'
    export default {
      data () {
        return {
          searchedTopic: '',
          items: [{}, {}, {}],
          noMoreData: false,
          status: []
        }
      },
      methods: {
        logout () {
          appService.logout()
        },
        isNoStatuses (idStr, i) {
          appService.getstatus(idStr).then((resp) => {
            var res = resp.data
            console.log('get res: ' + JSON.stringify(res))
            if (res.success === 1) {
              this.status[i] = false
            }
            else {
              this.status[i] = true
            }
          }).catch((e) => {
            console.log('error while getting : ' + JSON.stringify(e))
          })
        },
      created () {
        appService.checkAuth()
      },
      components: {

      },
      mounted () {
        for (var i = 0; i < this.items.length; i++) {
          this.isNoStatuses(this.item[i].id_str, i)
        }
      }
    }
    </script>