Блог

Главная - Вопросы по программированию - Как выполнить цикл только один раз повторяющихся данных с помощью v-for?

Как выполнить цикл только один раз повторяющихся данных с помощью v-for?

#vue.js #v-for

#vue.js #v-for

Вопрос:

Я получаю данные из облака. Я рассмотрел много вопросов в StackOverflow, но все они использовали данные data() . Я супер новичок в использовании Vue.js , поэтому не смог применить его в моем коде.

Я хотел бы отображать повторяющиеся данные только один раз v-for . В этом случае {{item.matched_product.name}} отображается повторно.

 <template slot-scope="scope">
  <div v-if="scope.row.external_store.service_name == 'sellorder'">
    <div
      v-for="item in scope.row.items"
      :key="item.id"
      class="option-detail"
      ref="option_variant"
    >
      <div v-if="item.matched_product">

        <-- This is the part I want to display only once --> 
        <span style="font-weight:bold">
           <i class="el-icon-caret-right"></i>
          {{item.matched_product.name}}
        </span>

        <span>
          <span
            v-if="item.matched_variant">
            {{item.matched_variant.options.map(obj => obj.value).join(' / ')}} {{item.qty}} / {{item.matched_variant.properties amp;amp; item.matched_variant.properties.soldout ?
            '(sold out)':''}}
          </span>
          <span v-else>No matching</span>amp;nbsp;
          <el-button size="mini" round @click="matchProduct(scope.row,item)">Edit matching</el-button>
        </span>
      </div>
      <div v-else>
        <el-button size="mini" @click="matchProduct(scope.row,item)">Match</el-button>
      </div>
    </div>
  </div>
</template>

Что мне делать?

Это тот, который у меня есть..

Ответ №1:

Вы можете получить доступ index к своему for loop , выполнив следующее

 v-for="(item, index) in scope.row.items"

Затем вы можете просто добавить a v-if к элементу, который вы хотите отобразить только один раз, чтобы проверить if index , является ли 0

Комментарии:

1. Спасибо за ваш ответ. Я сделал то, что вы упомянули, и добавил v-for="(item, index) in scope.row.items" , но у меня есть еще одна проблема, из-за которой она не отображается matched_product.name в том же элементе..

2. У вас это есть сейчас, верно? <span style="font-weight:bold" v-if="index == 0"> <i class="el-icon-caret-right"></i> {{item.matched_product.name}} </span>

3. Да, я написал так, и я вставил v-for="(item, index) in scope.row.items" строку 4, и теперь у меня есть только одна matched_product.name , у которой время от времени будут разные имена. Я только что добавил фотографию! Массив scope.row.items получит много разных matched_product.name .

4. {{ ((index == 0) || item.matched_product.name != scope.row.items[index-1].matched_product.name) ? item.matched_product.name : '' }} Я сделал это, и это работает!! В любом случае спасибо за ваш ответ!!

Ответ №2:

Я добавил ниже, как @JoshBonnick mentinoed

 v-for="(item, index) in scope.row.items"

и я также вставил этот код.

 {{ ((index == 0) || item.matched_product.name != scope.row.items[index-1].matched_product.name) ? item.matched_product.name : '' }}

Теперь это работает нормально.