Vue v-for для первого элемента, содержащего свойство X, вызывает метод

1

Скажем, у меня есть компонент, который повторяется с помощью цикла v-for:

<hotel v-for="(hotel, index) in hotels"></hotel>

И мой массив отелей будет выглядеть так:

[
    {
        name: false   
    }, 
    {
        name: false   
    },  
    {
        name: true   
    }, 
    {
        name: true   
    }
]

Как я могу выполнить действие, когда мой цикл v-for встречает name свойства, установленное в true, только в первый раз, когда он сталкивается с этим правдоподобным свойством?

Я знаю, что я мог бы где-то кэшировать свойство и только запускать что-то один раз и не запускать снова, если он был установлен, но это не кажется эффективным.

Теги:
vue.js
vuejs2

3 ответа

3
Лучший ответ

Используйте расчет, чтобы сделать копию hotels где первый имеет свойство isFirst.

computed: {
    hotelsWithFirstMarked() {
        var result = this.hotels.slice();
        var first = result.find(x => x.name);

        if (first) {
            first.isFirst = true;
        }
        return result;
    }
}
Поделиться
  • 0
    Я предполагаю, что я должен также использовать this.$set() для поддержания реактивности, если я хочу установить несуществующее свойство? Вместо того, чтобы просто устанавливать свойство напрямую, или это не так?
  • 1
    Не тот случай в компьютерном, о котором я должен был напомнить себе дважды, когда писал это.
Показать ещё 1 комментарий
2

Просто используйте вычисленный источник

HTML

 <div v-for="(hotel, index) in renderHotels"></div>

JS

    export default {
        name: 'message',
         data () {
           return{
                  hotels:[
    {
        name: false   
    }, 
    {
        name: false   
    },  
    {
        name: true   
    }, 
    {
        name: true   
    }
] ,
     wasFirst : false
              }

        },
        methods:{

        },
        computed:{
         renderHotels(){
           return this.hotels.map((hotel)=>{
             if(hotel.name && !this.wasFirst){
                  this.wasFirst = true;
                  alert('First True');
                   console.log(hotel);
               }
          })
        }
}
      }
Поделиться
  • 1
    Вы не можете делать вычисления с аргументами. Вы имеете в виду метод. Это также будет немного ломким при повторной визуализации.
  • 0
    Добавление к Рою Дж. См. Эту тему для объяснения stackoverflow.com/questions/40522634/can-i-pass-p
0

Лучший способ - использовать функцию фильтра.

    data() {
     return {
      firstTime: false,
     };
    },
    filters: {
        myFunc: function (hotel) {
          if (hotel.name && !this.firstTime) {
             //perform some action
             this.firstTime = true;
          }
        }
    }

<hotel v-for="(hotel, index) in hotels | myFunc"></hotel>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню