Vue v-for 在包含属性 X 的第一项上调用方法答案

【问题标题】：Vue v-for on first item containing property X call a methodVue v-for 在包含属性 X 的第一项上调用方法
【发布时间】：2018-02-22 07:46:46
【问题描述】：

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

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

我的酒店数组看起来像这样：

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

当我的v-for 循环遇到属性name 仅在它第一次遇到此真实属性时设置为true 时，我该如何执行操作？

我知道我可能会在某处缓存一个属性，然后只运行一次，如果已设置则不再运行，但这感觉效率不高。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

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

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

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

【讨论】：

如果我想设置一个不存在的属性，我猜我也应该使用this.$set() 来保持反应性？而不是简单地直接设置属性，或者这里不是这种情况？
计算中的情况并非如此，我在编写它时不得不提醒自己两次。
顺便说一下，您使用的是Object.assign()，然后在对象上调用result.find（数组原型方法）。我理解这个概念，但可能会将其更改为工作代码以供将来参考/其他用户使用？

【解决方案2】：

只需使用计算的source

HTML

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

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

【讨论】：

您不能使用参数进行计算。你说的是方法。这在重新渲染时也会有点脆弱。
添加到 Roy J.. 请参阅此主题以获取说明 stackoverflow.com/questions/40522634/can-i-pass-p

【解决方案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>

【讨论】：