How can I use this in nativescript-vue?

[starryalley]

My environment is nativescript-vue with typescript.

I tried the following in my main.ts: Vue.registerElement("DropDown", () => require("nativescript-drop-down/drop-down").DropDown);

And then using the DropDown tag in a component.vue file like this:

<template>
    <StackLayout>
        ...
        <DropDown :items="myitems" selectedIndex="0" />
        ...
    </StackLayout>
</template>

Unfortunately it just hangs there without any message. Commenting out the DropDown line then it renders fine.

I followed this guide to use nativescript plugin: https://www.nativescript.org/blog/using-plugins-in-a-nativescript-vue-app

Any ideas? Thank you.

[PeterStaev]

Hey @starryalley , I have no clue about Vue so can't help you on this. My guess is that the plugin requires a its own Vue thingy just like for Angular and cannot be used out of the box. But I do not have any current plans of adding Vue support. But will accept and merge any PR that wants to add Vue support 😉

[starryalley]

Thanks @PeterStaev. I'm also very new to nativescript-vue. I'll try and see if I can make it work. If so I'll send a PR!

[msaelices]

@PeterStaev I just did the same steps than @starryalley and it's working like a charm.

[starryalley]

@msaelices I really want to know how you set it up?

Are you also using nativescript-vue with typescript in <script lang="ts> tag, with single file vue component? Thanks.

[msaelices]

Basically I tested it only on Android. Now I've tested it on iOS and I get the silent error you got ;)

[starryalley]

Thanks for confirming. I worked on iOS as well. Haven't tested on Android.

[msaelices]

@starryalley I think I've got the error cause. It's related to webpack, which bundle the DropDown code as well as putting into node_modules. So there are several references of DropDown and NS thinks is not a View subclass. I will send a fix for that.

[starryalley]

Great news. I know nothing about webpack. Thanks. I'll definitely give your fix a try when it's there.

[msaelices]

After several hours debugging. I finally fix the problem installing the latest NPM packages.

[dwatring]

@msaelices Can you be more specific with your fix? Thanks!

[msaelices]

@dwatring sure, these are my dependencies (placed on template/package.json):

"dependencies": {
    "nativescript-drop-down": "^4.0.0",
    ...
    "nativescript-theme-core": "^1.0.4",
    "nativescript-vue": "^1.4.0-alpha.0",
    "tns-core-modules": "^4.1.0",
    "vue-router": "^3.0.1"
  },

[starryalley]

I think what's different in my dependencies is only nativescript-vue. I'm using 1.3.1. Upgrading to 1.4.0-alpha.0 breaks my entire app so I can't verify if it works... I have no clue what's breaking my app. 1.3.1 works perfectly with other plug-ins though.

[starryalley]

It turns out the package.json in template isn't get updated in my setup. With nativescript-vue@1.3.1 and tns-core-modules@4.1.0 this works perfectly fine on iOS. Closing.

[wendt88]

Thx for your implementation! Can I use v-model="selectedIndex" or should I work with :selectedIndex="selectedIndex" and @selectedIndexChanged="selectedIndexChanged" to handle the value?

On init I would set the first value of my items so I tried:

created () {
        this.$set(this, 'selectedIndex', 0);
}

But I am not able to set a value from outside