Vue text binding issue

[ardoramor]

I'm not sure if this plugin supports vue or the readme provides just the minimal integration. However, I'm running into a strange issue where the text binding causes Error: Cannot convert object to Ljava/lang/Object; at index 0

In my app.js, I do the following:

import Vue from 'nativescript-vue'
import MainPage from './components/MainPage'

Vue.registerElement('CheckBox', () => require('./nativescript-checkbox').CheckBox, {
    model: {
        prop: 'checked',
        event: 'checkedChange'
    }
})

new Vue({
    render: h => h(MainPage)
}).$start()

I have a list of items that are rendered with a component. The components template is:

<template>
	<CheckBox :text="item.text" v-model="item.checked" />
</template>

The exception is thrown on Android from this line: https://github.com/nstudio/nativescript-checkbox/blob/master/checkbox.android.ts#L129

Putting some debug statements, I see the following output when the first item is {text: "testValue", checked: false}.

CheckBox.prototype[exports.textProperty.setNative] = function (value) {
    // $> textProperty setNative string {} (default) {}
    // $> textProperty setNative testValue (testValue) "testValue"
    console.info('textProperty setNative', String(value), Object.getPrototypeOf(value), "(" + value + ")", JSON.stringify(value))
    this.nativeView.setText(java.lang.String.valueOf(value));
};

However, when I change my template to the following (i.e., text is not longer bound and is simply a static attribute), I don't get the exception but I also don't get the desired results.

<template>
	<CheckBox text="item.text" v-model="item.checked" />
</template>

When the above template is used, I never get the unexpected {} or default value set on the textProperty. What this tells me is either Vue integration with NativeScript has a bug or this plugin. Yet, I'm just starting to play around with NativeStript Vue and so don't have a full grasp. Would definitely appreciate if anyone could shed some light on the issue.

[rigor789]

@ardoramor what version of NativeScript-Vue are you using?

I'm assuming that you are rendering the component in a ListView, which has recently been refactored to avoid issues like this. The issue is that the initial render is done using a DeepProxy object, which basicly returns a proxy for up to 10 levels deep. This has been removed, and replaced with a better mechanism recently.

See the release where the change has been made: https://github.com/nativescript-vue/nativescript-vue/releases/tag/v2.0.0-alpha.0

don't create view without data (ba4e994), closes #229

If you can't update NativeScript-Vue you can work around the issue by adding a typecheck inside the template or use a computed property - this is ugly but works (not required in the 2.0 alpha releases)

<CheckBox :text="typeof item.text === 'String' ? item.text : ''" v-model="item.checked" />

[ardoramor]

@rigor789 It's actually from the playground. Looks to be the latest @1.3.1 Here are the version of packages used:

{
"@angular/animations": "6.0.3",
"@angular/common": "6.0.3",
"@angular/compiler": "6.0.3",
"@angular/core": "6.0.3",
"@angular/forms": "6.0.3",
"@angular/http": "6.0.3",
"@angular/platform-browser": "6.0.3",
"@angular/platform-browser-dynamic": "6.0.3",
"@angular/router": "6.0.3",
"kinvey-nativescript-sdk": "3.11.1",
"nativescript-accelerometer": "2.0.1",
"nativescript-angular": "6.0.0",
"nativescript-background-http": "3.2.7",
"nativescript-camera": "4.0.2",
"nativescript-fresco": "3.0.7",
"nativescript-geolocation": "4.2.6",
"nativescript-intl": "3.0.0",
"nativescript-iqkeyboardmanager": "1.3.0",
"nativescript-social-share": "1.5.0",
"nativescript-theme-core": "1.0.4",
"nativescript-ui-autocomplete": "3.7.0",
"nativescript-ui-calendar": "3.6.0",
"nativescript-ui-chart": "3.6.1",
"nativescript-ui-dataform": "3.6.0",
"nativescript-ui-gauge": "3.6.0",
"nativescript-ui-listview": "3.5.7",
"nativescript-ui-sidedrawer": "4.1.0",
"nativescript-vue": "1.3.1",
"reflect-metadata": "0.1.12",
"rxjs": "6.2.0",
"tns-core-modules": "4.1.0",
"zone.js": "0.8.26"
}

[rigor789]

The fix has been released in 2.0.0-alpha.0, so the workaround is still required.