Блог

Я генерирую данные из массива с объектами и перебираю их, чтобы отобразить определенные свойства. У меня также есть свойство tags, и иногда объект имеет один тег или несколько. Я хочу сделать границу вокруг каждого тега, но в настоящее время мой код создает одну большую границу вокруг всего тега, что нежелательно. Как я могу поставить границу для каждого отдельного тега? Я использую Vue.js .

Вот мой html:

 <template>
  <div id="app">
    <input
      type="text"
      v-model="searchQuery"
      placeholder="Search"
      class="search-input"
    />

    <div class="search-filters-container">
      <div class="filters">
        <span>Sort By:</span>
        <span class="filter"
          >Participant nationality
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            @click="sortDescByParticipantNationality()"
            v-if="isSortedAsc"
            fill="#818181"
            class="hover"
          >
            <path
              d="M20.15,16.85a.49.49,0,0,0,.7-.7l-8.5-8.5a.49.49,0,0,0-.68,0l0,0-8.5,8.5a.49.49,0,0,0,.7.7L12,8.71Z"
            />
          </svg>
          <svg
            v-else
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            @click="sortAscByParticipantNationality()"
            fill="#818181"
            class="hover"
          >
            <path
              d="M3.85,7.65a.49.49,0,0,0-.7.7l8.5,8.5a.49.49,0,0,0,.68,0l0,0,8.5-8.5a.49.49,0,1,0-.7-.7h0L12,15.79Z"
            />
          </svg>
        </span>
        <span class="filter"
          >Participant name
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            @click="sortDescByParticipantName()"
            v-if="isSortedAscByName"
            fill="#818181"
            class="hover"
          >
            <path
              d="M20.15,16.85a.49.49,0,0,0,.7-.7l-8.5-8.5a.49.49,0,0,0-.68,0l0,0-8.5,8.5a.49.49,0,0,0,.7.7L12,8.71Z"
            />
          </svg>
          <svg
            v-else
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            @click="sortAscByParticipantName()"
            fill="#818181"
            class="hover"
          >
            <path
              d="M3.85,7.65a.49.49,0,0,0-.7.7l8.5,8.5a.49.49,0,0,0,.68,0l0,0,8.5-8.5a.49.49,0,1,0-.7-.7h0L12,15.79Z"
            />
          </svg>
        </span>
      </div>
    </div>
    <masonry :cols="2" :gutter="30">
      <div v-for="(item, index) in resultQuery" :key="item.id" class="box">
        <svg
          @click="removeItem(index)"
          :id="item.id"
          class="x-sign hover"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="#818181"
        >
          <path
            d="M.15.15a.49.49,0,0,1,.68,0l0,0h0L12,11.29,23.15.15a.48.48,0,0,1,.63-.06l.07.06a.49.49,0,0,1,0,.68l0,0h0L12.71,12,23.85,23.15a.48.48,0,0,1,.06.63l-.06.07a.49.49,0,0,1-.68,0l0,0h0L12,12.71.85,23.85a.48.48,0,0,1-.63.06l-.07-.06a.49.49,0,0,1,0-.68l0,0h0L11.29,12,.15.85A.48.48,0,0,1,.09.22Z"
          />
        </svg>
        <svg
          class="quotes"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="#1c44b4"
        >
          <path
            d="M19.05,21.51A5,5,0,0,1,14.48,19a9.36,9.36,0,0,1-1.32-5.11,12.68,12.68,0,0,1,2-7,13.6,13.6,0,0,1,6-4.95l.69,1.39a10.41,10.41,0,0,0-4.14,3.18A7,7,0,0,0,16,11a5.34,5.34,0,0,0,.23,1.63,4.43,4.43,0,0,1,2.87-1A5,5,0,0,1,22.57,13,4.76,4.76,0,0,1,24,16.55a4.88,4.88,0,0,1-4.95,5Zm-13.17,0A5,5,0,0,1,1.32,19,9.36,9.36,0,0,1,0,13.92,12.76,12.76,0,0,1,2,7,13.71,13.71,0,0,1,8,2l.7,1.39A10.41,10.41,0,0,0,4.53,6.57,7,7,0,0,0,2.79,11,5.05,5.05,0,0,0,3,12.61a4.42,4.42,0,0,1,2.86-1A5,5,0,0,1,9.41,13a4.76,4.76,0,0,1,1.43,3.6,4.88,4.88,0,0,1-5,5Z"
          />
        </svg>

        <h1>{{ item.content }}</h1>
        <p class="tags">{{ item.tags.toString() }}</p>
        <p>
          {{
            `${item.participant.age}, ${item.participant.name} from ${item.participant.nationality}`
          }}
        </p>
      </div>
    </masonry>
  </div>
</template>
  

и мой соответствующий код css:

 .tags {
      border: solid 2px gray;
      width: 70px;
    }
  

вот также ссылка, показывающая проблему:
https://imgur.com/a/s2zF85p

Вам нужно перебирать теги элементов.

Заменить

 <p class="tags">{{ item.tags.toString() }}</p>
  

С

 <p> <span class="tags" foreach="(tag, index) in  item.tags">  {{ tag.toString() }} </span></p>