Question

假设我有一个用v-for循环重复的组件，如下所示：

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

我的酒店阵列看起来像这样：

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

当我的v-for循环遇到属性name时，只有在第一次遇到此真实属性时才能执行操作？

我知道我可能会在某个地方缓存一个属性，只运行一次，如果已经设置则不再运行但是效率不高。

Answer 1

使用computed制作hotels的副本，其中第一个属性具有isFirst属性。

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

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

Answer 2

只需使用计算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);
               }
          })
        }
}
      }

Answer 3

最好的方法是使用过滤功能。

    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包含属性X的第一个项目调用方法

3 个答案: