CODEWITHSUNDEEP
vue.jsvuejs2
Un1
Un1

Reputation: 4132

How do I properly display data from this Vue method?

I'm new to Vue and JS.

Could someone help me understand how can I:

Code:

Right now it looks like this and just displays data to console.

[...]

<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>

I want to display it on the page using a loop. Something like this:

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

There's going to be 2 loops - one in the method and one in the template, which makes it confusing. Should I maybe save it to data () first? I'm not sure how to do it properly.

Upvotes: 0

Views: 533

Answers (1)

V. Sambor
V. Sambor

Reputation: 13389

If I understand well, you will receive an array of data and you want to display it. In this case you don't need to loop in the model and in the template. You will just save array locally and then loop through it once in the template.

I will illustrate some ES6 syntax as well in my example:

<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>

Upvotes: 1

Related Questions