VueJS v-如果json中的json值为true

Question

我的问题是，当我的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>