VueJS v-if json value from json is true

Question

my question is how can I show "show text" in the layout when "more": true is set in my JSON

My Layout:

<b-row v-for="?" v-if="?">
    <b-col>
        show text
    </b-col>
</b-row>

My JSON:

{
  "array": [
    {
      "id": "1",
      "more": false
    },
    {
      "id": "2",
      "more": true
    }
  ]
}

data () {
  return {
    n: 0,
    array: json
  }
}

EDIT: SOLVED IT => v-if="array[0].more"

Something like v-for="foo in array" v-if="foo.more" should do it, I think? If that doesn't work, try the v-if on the <b-col>. — ceejayoz
– ceejayoz, Commented Sep 16, 2018 at 21:55
@ceejayoz looks like it should be v-for="foo in array.array". It's an odd structure — Phil
– Phil, Commented Sep 17, 2018 at 0:50

Phil · Accepted Answer · 2018-09-17 00:20:23Z

2

I've never been a fan of conditional rendering in a loop.

My preference is to use a computed property that returns a filtered set of your iterable object. For example

computed: {
  more () {
    return this.array.array.filter(({ more }) => more)
  }
}

then in your template

<b-row v-for="item in more">
  <b-col>
    show text
  </b-col>
</b-row>

answered Sep 17, 2018 at 0:20

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Comments

Ffloriel · Accepted Answer · 2018-09-16 23:04:32Z

1

<b-row v-for="el of array.array" v-if="el.more">
    <b-col>
        show text
    </b-col>
</b-row>

In your json, you have your array in the property array. Your vue component set the data of the json in the property array. This means the array is accessible in array.array.

answered Sep 16, 2018 at 23:04

Ffloriel

4984 silver badges10 bronze badges

1 Comment

Elias Over a year ago

v-for="array of/in array.array" v-if="array. more" doesn't work. it shows the row both when it`s true and false.

Collectives™ on Stack Overflow

VueJS v-if json value from json is true

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related