Skip to content

v-model value must be a valid JavaScript member expression #4072

Closed
@shadoWalker89

Description

@shadoWalker89

Version

3.1.4

Reproduction link

[https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aW5wdXQgdHlwZT1cInRleHRcIiB2LW1vZGVsPVwiZmluZEN1cnJlbmN5T2ZmZXIoKS5wcmljZVwiIC8 XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICB0aGVPZmZlcnM6IFtcbiAgICAgICAge3ByaWNlOiAxMH0sXG4gICAgICAgIHtwcmljZTogMjB9XG4gICAgICBdXG4gICAgfTtcbiAgfSxcbiAgXG4gIG1ldGhvZHM6IHtcbiAgICBmaW5kQ3VycmVuY3lPZmZlcigpIHtcbiAgICAgIHJldHVybiB0aGlzLnRoZU9mZmVyc1swXTtcbiAgICB9XG4gIH1cbn1cbjwvc2NyaXB0PiJ9](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aW5wdXQgdHlwZT1cInRleHRcIiB2LW1vZGVsPVwiZmluZEN1cnJlbmN5T2ZmZXIoKS5wcmljZVwiIC8 XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICB0aGVPZmZlcnM6IFtcbiAgICAgICAge3ByaWNlOiAxMH0sXG4gICAgICAgIHtwcmljZTogMjB9XG4gICAgICBdXG4gICAgfTtcbiAgfSxcbiAgXG4gIG1ldGhvZHM6IHtcbiAgICBmaW5kQ3VycmVuY3lPZmZlcigpIHtcbiAgICAgIHJldHVybiB0aGlzLnRoZU9mZmVyc1swXTtcbiAgICB9XG4gIH1cbn1cbjwvc2NyaXB0PiJ9)

Steps to reproduce

Short description of the issue

Cannot use v-model with the result of a function

This used to work in vue 2

Details of the problem in my app

I have an app that was built using vue 2 in this app i have something like this

As you can see in this template i'm using a method findCurrencyOffer() to get an object out of theOffers and then use the price property on the offer with the v-model
This worked fine on vue 2 but in vue 3 i get this error

VueCompilerError: v-model value must be a valid JavaScript member expression.

<th v-for="currency in currencies">
    <input type="text" v-model="findCurrencyOffer(currency.id).price">
</th>
    methods: {
        findCurrencyOffer(currency_id) {
            return _.find(this.theOffers, {currency_id, participant_group_id: null, country_id: null});
        }
    }

What is expected?

Bind the input value on the price attribute of the object returned by the findCurrencyOffer() function

What is actually happening?

I get this error when compiling the code

VueCompilerError: v-model value must be a valid JavaScript member expression.


Same code used to work with vue 2

I saw that a similar issue was already opened #3910 and then closed due to a fix but that fix does not seem to solve my issue.
In the other issue the author is trying to access a 2D array directly within the v-model but in my case i'm using a function to return an object

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions