Initial content of typeahead v-model not displayed

[DonMartin76]

When binding a typeahead component instance to an existing v-model, the current value of the v-model property doesn't seem to be propagated to the input field; if a new value is typed in, or if the view model is changed from the outside, everything is propagated correctly. It's just the initial value which does not make it into the input field.

Version & browser

0.25.0, Safari and Chrome on macOS 0.13.5

Which component

Typeahead

Steps to reproduce the problem

Here, standardClaims is the following list:

const standardClaims = [
            "sub",
            "name",
            "given_name",
            "family_name",
            "middle_name",
            "nickname",
            "preferred_username",
            "profile",
            "picture",
            "website",
            "email",
            "email_verified",
            "gender",
            "birthdate",
            "zoneinfo",
            "locale",
            "phone_number",
            "phone_number_verified"
        ];

Then the code which does not work is the following; "does not work" in the sense that the pre-populated value of oidcClaim is not displayed in the input field.

<input id="aninput" class="form-control" type="text" placeholder="Specify claim name..." />
<typeahead v-model="oidcClaim" :target="#aninput" :data="standardClaims" />

Expected behavior

The value of the property referenced in v-model is written into the input field initially.

Actual behavior

The input field is always empty.

Thanks for your awesome work!

[wxsms]

Thanks for filling this issue. you may use mounted hook to assign v-model as a workaround for now.

[DonMartin76]

Thanks for the heads-up, using mounted to prepopulate the input elements worked fine.

[DonMartin76]

Except when adding things to an array dynamically, where the typeahead element displays part of the dynamically added content (using this.value.someArray.push(...)... But I can live with that.

[kyleweishaupt]

I'm having a similar issue with an edit screen. I need to wait for an ajax request to get the data and then apply it to the v-model used on the typeahead, but can't seem to get it to populate the textbox. The ajax function is even called in the component's mounted() method.