CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Adorno
Adorno

Reputation: 51

Display JS object value in Vue

Vue noob here...

In one of my routes in a Vue app I have this JS object displayed in the DevTools. How do I access/display the values in, for example, filteredData:Array[1]?

enter image description here

Upvotes: 1

Views: 9037

Answers (3)

geoctrl
geoctrl

Reputation: 685

As long as your data is assigned in the data property (keeping in mind the getter/setter caveats), you can use that variable in your template:

<template>
  <div>{{filteredData[0]}}</div>
</template>

<script>
  export default {
    data() {
      return {
        filteredData: filteredData, // assign your data here
      }
    }
  }
</script>

Upvotes: 4

Gianni
Gianni

Reputation: 136

You could access the object directly with {{filteredData[0]}} and to access the rest of the info you just dot notation to access properties within that object.

<div>{{filteredData[0].id}}</div>

Remember in JS array index start with 0. When you are in an array and to access the specific index which you have to get to the data it will be [#] then since accessed that index which has an object then its easy to get that info with dot notation. For your example:

  • filteredData[0].id
  • filteredData[0].name
  • filteredData[0].logo

Upvotes: 2

Mohit Tilwani
Mohit Tilwani

Reputation: 2786

As it is a data property, you can use it in template like filteredData[i] where i could be any number within the length of array and if you want to use in computed, methods or in lifecycle methods then you should use it like this.filteredData[i], again where i could be any number within the length of the array

Upvotes: 2

Related Questions