How do I properly display data from this Vue method?

Question

I'm new to Vue and JS.

Could someone help me understand how can I:

display the data I get from the method shown below
and format the method itself and make it look like a proper Vue method in ES6

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.

V. Sambor · Accepted Answer · 2018-02-10 23:56:24Z

1

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>

answered Feb 10, 2018 at 23:56

V. Sambor

13.4k6 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I properly display data from this Vue method?

Code:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related