Vue.js bind v-model input with prop initial value

Question

I am trying to pass down a initial value to a select input bound by v-model. I cannot figure out why this doesn't work:

props: ['team'],
data() {
    form: {
        data: {
            country: this.team.country
        }
    }
}

The form.data.country is undefined. Although, the props data is actually passed down. I can access it with Vue Devtools like $vm0.team.country and I can print other data from the props. However, it is not registred in the data().

Also, when trying to debug using mounted(), the property, team, is not defined.

mounted() {
    console.log(this.team); 
}

But, as I stated earlier, it is defined when the template is rendered, and can be used like this.

<input class="input" type="text" name="name" :value="team.name" disabled>

Why is the properties I am passing not beinged recognized in data()?

Did you forget to return an object from the data function? — Bert
– Bert, Commented Dec 6, 2017 at 23:41
No, I do return an object. return { form: { isLoading: false, data: { country: this.team.country } } } — Fredrik
– Fredrik, Commented Dec 6, 2017 at 23:42
Is team populated asynchronously? You said an initial value bound by v-model; could you show how you are doing that? It would be helpful to have a working example. — Bert
– Bert, Commented Dec 6, 2017 at 23:43
However, based on the information given, my expectation is that team is initially undefined, then later set. That would explain why this.team is undefined in mounted and never defined in data. The data function is only called once when the component is created. — Bert
– Bert, Commented Dec 6, 2017 at 23:51
You are correct. The props data was asynced loaded by the parent. Thanks! — Fredrik
– Fredrik, Commented Dec 7, 2017 at 0:07

bbsimonbb · Accepted Answer · 2017-12-07 10:01:58Z

0

The asynchronous loading is not the problem. Even if team is hardcoded above, it's still undefined when data is created in the component. (The component needs to be created before the root Vue that passes the prop.)

There is, perhaps someone will correct me, never a good reason to reference props in your data. Something is either data (the current component knows where to find what it wants) or it's a prop (the component will let it's context supply the info).

Then, as you've discovered, your data is created once. Vue watches everything for changes, but you're vulnerable to changes of the root value. If the thing referenced as a value when data is created, changes, the reactive pipe is broken. The answer to this is the store pattern. You watch a variable in global scope, that never gets replaced, even though it's contents may change.

code

edited Dec 7, 2017 at 10:01

answered Dec 7, 2017 at 9:00

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marek Urbanowicz Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review

bbsimonbb Over a year ago

"The answer to this [question] is [to use] the store pattern".

Fredrik · Accepted Answer · 2018-01-11 09:41:37Z

0

The props data was asynced loaded by the parent. This was suggested in a comment by @Bert

answered Jan 11, 2018 at 9:41

Fredrik

3,3508 gold badges37 silver badges72 bronze badges

Collectives™ on Stack Overflow

Vue.js bind v-model input with prop initial value

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related