[Vuejs]-How do I display one object of an array in Vue.JS

by

2👍

✅

You shouldn’t use v-if and v-for in the same element, in this case i suggest to use a computed property that only return the desired example :

data () {
return{
  examples: [
    {
      exampleID: 5,
      exampleText: 'foo'
    },
    {
      exampleID: 3,
      exampleText: 'bar'
    }
  ]
}
},
computed:{
    myExample(){
       return this.examples.find(ex=>ex.exampleID===3)
    }
}

then render it like :

  <Task   :example="myExample"/>
👤Boussadjra Brahim

2👍

Another efficient way of doing it without v-for is

data () {
return{
  examples: [
    {
      exampleID: 5,
      exampleText: 'foo'
    },
    {
      exampleID: 3,
      exampleText: 'bar'
    }
  ],
  id: 3
}
},
computed:{
    myExample(){
       return id => this.examples.find(ex=>ex.exampleID===id)
    }
}

rendering part will be like

<Task :example="myExample(id)"/>

In this way you no need to hardcode the value as 3 in the computed property.

👤Amaarockz

Leave a comment