Eslint-plugin-vue: Unexpected v-model error

[KristofMorva]

The valid-v-model throws an 'v-model' directives cannot update the iteration variable 'x' itself error, even if the iteration variable is not modified (3.14.0).

For example, the following case works perfectly:

v-for="i in 4" v-model="numbers[i]"

However, if we introduce a BinaryExpression, the error above will be produced:

v-for="i in 4" v-model="numbers[i - 1]"

I might be wrong, but I believe this construction should be allowed, as

• it works
• the error message does not fit the scenario (iteration variable is not modified)

[michalsnik]

Thanks for posting this issue @KristofMorva ! I'll look into it :)

[ReynerHL]

Hi @michalsnik
The same applies to variable interpolations using quoted strings:

v-for="i in 4" v-model="numbers[`${i}`]"

• it works
• the error message does not fit the scenario (iteration variable is not modified)

Can you fix this case, please ?

[qkdreyer]

I've just encountered the same issue.

Pseudo code :

<div v-for="(kind, kindIndex) in ['shipping', 'billing']" :key="kindIndex">
  <h3>{{ $t(`delivery.address.${kind}`) }}</h3>
  <hr>
  <address-component :address="$data[`${kind}Address`]"/>
  <select v-model="$data[`${kind}Address`]">
    <option v-for="(address, addressIndex) in addresses" :key="addressIndex" :value="address">
      #{{ addressIndex }} {{ address.street }} {{ address.postcode }} {{ address.city }}
    </option>
  </select>
</div>

[joshfoskett]

Also experiencing the issue described in the two comments above.

@michalsnik Should this issue be reopened, or a new one created?