Q:

Change data of Refs in v-for Loop - Vuejs

I have some problems with VueJs Change data of Refs in v-for Loop. Please help me.
My request: InitialitemStreamWidth and InitialitemStreamHeight is size of image. I want if InitialitemStreamWidth > InitialitemStreamHeight, my image class will be fit_width and on the other hand is fit_height
My components:
<template>
  <ul>
    <li v-for="(item, i) in user.photostream" :key="i">
      <picture class="fit_image">
        <img :class="{'fit_width' : fit_choice === 'Width', 'fit_height' : fit_choice === 'Height'}" :ref="'imageStream_' + item.id" :src="item.image"/>
      </picture>
    </li>
  </ul>
</template>
<script>
export default {
  data: function () {
    return {
      fit_choice: null
    }
  },
  mounted () {
    this.itemclass()
  },
  methods: {
    itemclass: function () {
      for (var item of this.user.photostream) {
        var InitialitemStreamWidth = this.$refs['imageStream_' + item.id][0].clientWidth
        var InitialitemStreamHeight = this.$refs['imageStream_' + item.id][0].clientHeight
        if (InitialitemStreamWidth > InitialitemStreamHeight) {
            this.fit_choice = 'Width'
        } else if (InitialitemStreamWidth <= InitialitemStreamHeight) {
            this.fit_choice = 'Height'
        }
      }
    }
  }
}
</script>

Error: fit_choice in data is not dynamic, it just fixed.

A:

First I think you should init your fit_choice variable ('Width' or 'Height')
And if there will be a problem with your class expression in your template 
try this:
<template>
  <ul>
    <li v-for="(item, i) in user.photostream" :key="i">
      <picture class="fit_image">
        <img v-if="fit_choice === 'Width'" class="class="fit_width" :ref="'imageStream_' + item.id" :src="item.image"/>
        <img v-else class="fit_height" :ref="'imageStream_' + item.id" :src="item.image"/>
      </picture>
    </li>
  </ul>
</template>

I have not tried, but I think you will understand the concept.
I hope it helps ;)
UPDATE:
I see In that case, you should change the fit_choice variable, to an array.
and then the method should be:
  for (var item of this.user.photostream) {
    var InitialitemStreamWidth = this.$refs['imageStream_' + item.id][0].clientWidth
    var InitialitemStreamHeight = this.$refs['imageStream_' + item.id][0].clientHeight
    if (InitialitemStreamWidth > InitialitemStreamHeight) {
        this.fit_choice.push('Width')
    } else if (InitialitemStreamWidth <= InitialitemStreamHeight) {
        this.fit_choice.push('Height')
    }
  }

then.. you have each class of each photo. After that your template should be:
<template>
  <ul>
    <li v-for="(item, i) in user.photostream" :key="i">
      <picture class="fit_image">
        <img :class="{fit_choice[i]}" :ref="'imageStream_' + item.id" :src="item.image"/>
      </picture>
    </li>
  </ul>
</template>

(syntax can be bad, but I hope you can understand the concept of my new idea. :) )

