search

PeterStaev / NativeScript-Drop-Down

A NativeScript DropDown widget.
Apache License 2.0
105 stars 65 forks source link

How can I get the index in nativescript-vue? #201

Closed kafio23 closed 5 years ago

kafio23 commented 5 years ago

My environment is nativescript-vue with javascript and I am using DropDown tag in a component.vue file like this:

<DropDown ref="dropDownList" selectedIndex="0" :items="items" v-model="selectedItem" @selectedIndexChanged="dropDownSelectedIndexChanged" class="dropdown"> </DropDown>

data() { return { items: ["Hello", "Bye"], selectedItem: 0 } }

dropDownSelectedIndexChanged() { console.log(this.selectedItem) }

The tag is rendered correctly but with "dropDownSelectedIndexChanged()" I always get 0 so selectedItem is not changing. How can I get the index from DropDown? v-model doesn't work?

Thanks!

PeterStaev commented 5 years ago

Hey @kafio23 , I'm not a Vue developer myself, so can't help you much on this. But reading the last comment here https://github.com/PeterStaev/NativeScript-Drop-Down/issues/180#issuecomment-428626341seems you might not be able to use v-model and have to manually work with the selectedIndexChanged event and to update the value in your model as a workaround.

gabrielsmelo commented 5 years ago

Hello @kafio23 . I had the same problem, and I solved it:

Use the 'ref' to get the DropDown instance property (selectedIndex). It will get the currently selected index. Example:

<DropDown ref="dropDownList" selectedIndex="0" :items="items" v-model="selectedItem" 
@selectedIndexChanged="dropDownSelectedIndexChanged" class="dropdown"> </DropDown>

dropDownSelectedIndexChanged() { let index = this.$refs.dropDownList.nativeView.selectedIndex; }

Then, if you console.log(index) you'll see that it contains your current index.

Hope it helps you!!! P.S: I've found out this '$refs' command is VERY useful to get component properties! :)

kafio23 commented 5 years ago

Hey @kafio23 , I'm not a Vue developer myself, so can't help you much on this. But reading the last comment here #180 (comment) you might not be able to use v-model and have to manually work with the selectedIndexChanged event and to update the value in your model as a workaround.

That's true, thank you!

kafio23 commented 5 years ago

Hello @kafio23 . I had the same problem, and I solved it:

Use the 'ref' to get the DropDown instance property (selectedIndex). It will get the currently selected index. Example:

<DropDown ref="dropDownList" selectedIndex="0" :items="items" v-model="selectedItem" 
@selectedIndexChanged="dropDownSelectedIndexChanged" class="dropdown"> </DropDown>

dropDownSelectedIndexChanged() { let index = this.$refs.dropDownList.nativeView.selectedIndex; }

Then, if you console.log(index) you'll see that it contains your current index.

Hope it helps you!!! P.S: I've found out this '$refs' command is VERY useful to get component properties! :)

It works perfectly! thanks a lot!