Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
shadoWalker89 opened this issue Jul 6, 2021 · 2 comments
Closed

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

shadoWalker89 opened this issue Jul 6, 2021 · 2 comments

Comments

@shadoWalker89
Copy link

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

@edison1105
Copy link
Member

duplicate of #3993

@yyx990803
Copy link
Member

Closing as duplicate

@github-actions github-actions bot locked and limited conversation to collaborators Oct 17, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants