VueJS v-if json的json值为true

Question

我的问题是如何在“更多”时在布局中显示“show text”：在我的JSON中设置true

我的布局：

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

我的JSON：

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

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

编辑：解决了它=> v-if =“array [0] .more”

Answer 1

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

在你的json中，你的数组在array属性中。您的vue组件在属性array中设置json的数据。这意味着可以在array.array中访问该数组。

Answer 2

我从来没有成为循环中条件渲染的粉丝。

我的偏好是使用一个计算属性，它返回一个可迭代对象的过滤集。例如

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

然后在你的模板中

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