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

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

这里是一个基本的例子，说明如何实现你想要的。我使用全局变量 thumbnailFound 来确定是否找到缩略图，但在您的情况下，您可能希望使用更强大的变量。让我知道它是否有效！

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

    // JS
    var thumbnailFound;

    function valueIsValid (property) {

        if (!Array.isArray(property)) {
            return true;
        }

        if (thumbnailFound) {
            return false;
        }

        for (let i = 0; i < property.length; i++ ) {
            let thumbnail = property[i].thumbnail;

            if (thumbnail && thumbnail.length) {
                thumbnailFound = true;
                break;
            }

        }

        return !!(thumbnailFound);

    };

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

How to limit the following loop so it only displays the first matched element?

javascript

vue.js