Question

我是Vue和JS的新手。

有人可以帮助我理解我该怎么做：

显示我从下面显示的方法获得的数据
并格式化方法本身并使其看起来像ES6中的正确Vue方法

代码：

现在看起来像是这样，只是向控制台显示数据。

[...]

<script>
  var d = require('../util/diskinfo')

  export default {
    data () {
      return {
      }
    },
    methods: {
      getDrivesList () {
        d.getDrives(function(err, aDrives) {
          for (var i = 0; i < aDrives.length; i++) {
            console.log('Drive ' + aDrives[i].filesystem)
            console.log('blocks ' + aDrives[i].blocks)
            console.log('used ' + aDrives[i].used)
            console.log('available ' + aDrives[i].available)
            console.log('capacity ' + aDrives[i].capacity)
            console.log('mounted ' + aDrives[i].mounted)
          }
        })
      }
    }
  }
</script>

我想使用循环在页面上显示它。像这样：

<div v-for="i in aDrives" :key="i.id">
  <p>Disk name: {{aDrives[i].mounted}}</p>
  <p>Disk size: {{aDrives[i].blocks}}</p>
</div>

将会有2个循环 - 一个在方法中，另一个在模板中，这让人感到困惑。我应该先将它保存到data ()吗？我不确定如何正确地做到这一点。

Answer 1

如果我理解得很清楚，您将收到一系列数据并希望显示它。在这种情况下，您不需要在模型和模板中循环。您只需在本地保存数组，然后在模板中循环一次。

我将在我的示例中说明一些ES6语法：

<template>
  <div v-for="driver in drivers">
    <p> {{ driver.mounted }} </p>
    ... display all the data here
  </div>
</template>

<script>
  import d from '../util/diskinfo'

  export default {
    data () {
      return {
        drivers: []
      }
    },
    methods: {
      getDrivesList () {
        d.getDrives((err, aDrives) => (this.drivers = aDrivers))
      }
    }
  }
</script>

如何正确显示此Vue方法中的数据？

代码：

1 个答案: