Question

我根据JavaScript对象的属性值显示div。我想显示对象具有的第一个缩略图：

// HTML
<div v-for="value in object" v-if="valueIsValid(value)">

// JS
if (value instanceof Array) { // check if it's an array
  const propertyIsThumbnail = _.find(value, 'thumbnail')
  if (propertyIsThumbnail) { // get the values only if their key is 'thumbnail'
    return value.length > 0 // return if the thumbnail is not empty
  }
} else {
  return true // return everything else that's not an array.

它适用于这种对象：

{
  "livingroom": [],
  "bedroom": [],
  "study": [
    {
      "name": "s0",
      "thumbnail": "https://storage.googleapis.com/peterbucket/istagingViewer/sig@staging.com.tw/Cuiti/study/web/thumb_螢幕快照 2016-03-29 下午2.12.32.png",
      "web": "https://storage.googleapis.com/peterbucket/istagingViewer/sigstaging.com.tw/Cuiti/study/web/201603292.12.32.png"
    }
  ],

但是有了这些：

{
  "livingroom": [],
  "bedroom": [
    {
      "name": "s0",
      "thumbnail": "https://storage.googleapis.com/peterbucket/istagingViewer/sig@staging.com.tw/Cuiti/study/web/thumb_螢幕快照 2016-03-29 下午2.12.32.png",
      "web": "https://storage.googleapis.com/peterbucket/istagingViewer/sigstaging.com.tw/Cuiti/study/web/201603292.12.32.png"
    }
  ],
  "study": [
    {
      "name": "s0",
      "thumbnail": "https://storage.googleapis.com/peterbucket/istagingViewer/sig@staging.com.tw/Cuiti/study/web/thumb_螢幕快照 2016-03-29 下午2.12.32.png",
      "web": "https://storage.googleapis.com/peterbucket/istagingViewer/sigstaging.com.tw/Cuiti/study/web/201603292.12.32.png"
    }
  ],

它使div显示多次，因为有多个类别不是空的。而我想要的只是显示它不是空的第一个类别（第一个缩略图）。

如何做到这一点？

修改

这是循环的开始：

<template>
<div class="row">
  <div
    v-for="object in className | orderOrFilterBy searchProp"
    class="list-item col-md-12 clearfix"
  >
    <div
      v-if="keyIsVisible($key) && valueIsValid(value)"
      v-for="value in object"
      :class="[setColumnsByKey($key), setColumnAlignment($key)]"
    >

Answer 1

以下是如何实现您想要的基本示例。我使用全局变量.foo来确定是否找到缩略图，但在您的情况下，您可能希望使用更强大的东西。让我知道它是否有效！

thumbnailFound

如何限制以下循环，以便它只显示第一个匹配的元素？

1 个答案: