Vue v-for on first item containing property X call a method

Question

Let's say I have a component which repeats with a v-for loop like so:

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

And my hotels array would look like so:

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

How could I perform an action when my v-for loop encounters the property name set to true only on the very first time it encounters this truthy property?

I know I could probably cache a property somewhere and only run something once and not run again if it has been set but this does not feel efficient.

Roy J · Accepted Answer · 2017-09-14T10:15:33.497

3

Use a computed to make a copy of hotels where the first one has an isFirst property.

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

        if (first) {
            first.isFirst = true;
        }
        return result;
    }
}

edited Sep 14 '17 at 10:15

answered Sep 13 '17 at 14:48

Roy J

42,522
10
78
102

I am guessing I should also use `this.$set()` to maintain reactivity if I want to set a non-existent property? Instead of simply setting the property directly, or is this not the case here? – Stephan-v Sep 13 '17 at 14:54
1

Not the case in a computed, which I had to remind myself of, twice, while writing it. – Roy J Sep 13 '17 at 14:57
1

By the way you are using `Object.assign()` and in turn call `result.find` (an array prototype method) on an Object. I understand the concept but perhaps change it to working code for any future reference/other users? – Stephan-v Sep 14 '17 at 07:42

score 2 · Answer 2 · edited Jul 15 '22 at 22:58

2

Just use computed source

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);
               }
          })
        }
}
      }

edited Jul 15 '22 at 22:58

tony19

125,647
18
229
307

answered Sep 13 '17 at 14:39

Omri Lugasi

337
3
16

1

You cannot make computeds with arguments. You mean a method. This will also be a little brittle on re-render. – Roy J Sep 13 '17 at 14:41
Adding to Roy J.. see this topic for an explanation https://stackoverflow.com/questions/40522634/can-i-pass-p – enriqg9 Sep 13 '17 at 14:42

score 0 · Answer 3 · answered Sep 13 '17 at 14:44

Best way is to use filter function.

    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>

Vue v-for on first item containing property X call a method

3 Answers3