Как правильно извлечь выражение, используемое в v-for, из шаблона в код компонента?

Question

Я хочу извлечь выражение из шаблона, который находится внутри :class:

<div
  v-for="(user, index) in users"
  :key="index"
  :class="{'bg-yellow-lighter': infoWindowMarker && 
  infoWindowMarker.position.lat === user.position.lat && 
  infoWindowMarker.position.lng === user.position.lng}"
>
// more HTML here
</div>

Я уже подумал о свойстве computed и, похоже, я не могу использовать его, так как v-for циклпо массиву.

Есть ли другой способ или, может быть, я могу написать method и передать ему user?

Answer 1

создайте метод, подобный следующему:

methods:{
   getClass(user){
      return {'bg-yellow-lighter': infoWindowMarker && 
         infoWindowMarker.position.lat === user.position.lat && 
         infoWindowMarker.position.lng === user.position.lng}
   }
}

, тогда ваш HTML будет выглядеть так:

<div
  v-for="(user, index) in users"
  :key="index"
  :class="getClass(user)"
>
// more HTML here
</div>

примечание: если вам нужно, чтобы он был реактивным, вам лучше сделать его вычисляемым свойствома не метод.Подробнее об этом здесь: https://vuejs.org/v2/guide/computed.html#ad