Vue Template Selector

[rickdiazpr]

Is it only possible to use the if="$odd" template selector property for Vue?

Can't seem to get other "if" statements to work. For instance, my example code:

<Pager for="(item, index) in nodeContent" selectedIndex="0" > <v-template if="item.type==='image'"> <StackLayout class="pager-item" backgroundColor="#ff0000"> </StackLayout> </v-template> <v-template if="item.type==='video'"> <StackLayout class="pager-item" backgroundColor="#ff0000"> </StackLayout> </v-template> </Pager>
Gives me an error of

file:///node_modules/nativescript-pager/pager.js:1010:78: JS ERROR Error: could not dequeue a view of kind: UICollectionElementKindCell with identifier v-template-0 - must register a nib or a class for the identifier or connect a prototype cell in a storyboard

However, when I use if="$odd" it works fine.

Package.json

{ "nativescript": { "id": "org.nativescript.CredoNews", "tns-android": { "version": "6.3.1" }, "tns-ios": { "version": "6.3.0" } }, "description": "NativeScript Application", "license": "SEE LICENSE IN <your-license-filename>", "repository": "<fill-your-repository-here>", "dependencies": { "@nativescript/theme": "~2.2.1", "@vue/devtools": "^5.3.3", "apollo": "^2.27.3", "apollo-boost": "^0.4.7", "apollo-cache-inmemory": "^1.6.5", "apollo-cache-persist": "^0.1.1", "apollo-client": "^2.6.8", "apollo-link": "^1.2.14", "apollo-link-http": "^1.5.17", "apollo-link-rest": "^0.7.3", "graphql": "^15.0.0", "graphql-anywhere": "^4.2.6", "graphql-tag": "^2.10.3", "moment": "^2.24.0", "nativescript-fonticon": "^2.0.0", "nativescript-localstorage": "^2.0.1", "nativescript-pager": "^12.0.0-alpha.8", "nativescript-socketio": "^3.3.1", "nativescript-sqlite": "^2.6.0", "nativescript-toasty": "^3.0.0-alpha.2", "nativescript-ui-autocomplete": "^6.0.1", "nativescript-ui-listview": "^8.1.2", "nativescript-vue": "^2.6.1", "nativescript-vue-devtools": "^1.2.0", "qs": "^6.9.3", "tns-core-modules": "~6.3.0", "vue-apollo": "^3.0.3", "vue-moment": "^4.1.0", "vuex": "^3.3.0" }, "devDependencies": { "@babel/core": "~7.1.0", "@babel/preset-env": "~7.1.0", "apollo-cache-logger": "^1.1.1", "babel-loader": "~8.0.0", "nativescript-dev-webpack": "~1.4.0", "nativescript-vue-template-compiler": "~2.4.0", "node-sass": "^4.14.0", "vue-loader": "~15.4.0" }, "gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14", "readme": "NativeScript Application" }

[rickdiazpr]

After a bit more investigation, it doesn't appear that any "if" statements are working on .

***** Fatal JavaScript exception - application has been terminated. ***** Native stack trace: 1 0x10cb97bce NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 2 0x10cbd6368 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*) 3 0x10d5d62e2 ffi_closure_unix64_inner 4 0x10d5d6d0a ffi_closure_unix64 5 0x10fda282f -[UICollectionView _createPreparedCellForItemAtIndexPath:withLayoutAttributes:applyAttributes:] 6 0x10fda80cf -[UICollectionView _updateVisibleCellsNow:] 7 0x10fdad21e -[UICollectionView layoutSubviews] 8 0x110af6848 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] 9 0x10e2283f0 -[CALayer layoutSublayers] 10 0x10e22e57b CA::Layer::layout_if_needed(CA::Transaction*) 11 0x10e239c12 CA::Layer::layout_and_display_if_needed(CA::Transaction*) 12 0x10e182c84 CA::Context::commit_transaction(CA::Transaction*, double) 13 0x10e1b665f CA::Transaction::commit() 14 0x10e1b6ff1 CA::Transaction::observer_callback(__CFRunLoopObserver*, unsigned long, void*) 15 0x10ed5b2a7 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ 16 0x10ed55d5e __CFRunLoopDoObservers 17 0x10ed55ae4 CFRunLoopRunSpecific 18 0x1171e3c1a GSEventRunModal 19 0x1105f4f80 UIApplicationMain 20 0x10d5d6b4d ffi_call_unix64 21 0x126677b80 JavaScript stack trace: dequeueReusableCellWithReuseIdentifierForIndexPath(file:///node_modules/nativescript-pager/pager.js:1010:78) at file:///node_modules/nativescript-pager/pager.js:1010:78 at UIApplicationMain([native code]) at run(file:///node_modules/@nativescript/core/application/application.js:312:26) at file:///node_modules/nativescript-vue/dist/index.js:12597:2 at file:///node_modules/nativescript-vue-devtools/index.js:118:25 at file:///app/bundle.js:2617:10 at ./app.js(file:///app/bundle.js:2621:34) at __webpack_require__(file:///app/webpack/bootstrap:750:0) at checkDeferredModules(file:///app/webpack/bootstrap:43:0) at webpackJsonpCallback(file:///app/webpack/bootstrap:30:0) at anonymous(file:///app/bundle.js:2:61) at evaluate([native code]) at moduleEvaluation([native code]) at [native code] at asyncFunctionResume([native code]) at [native code] at promiseReactionJob([native code]) JavaScript error: file:///node_modules/nativescript-pager/pager.js:1010:78: JS ERROR Error: could not dequeue a view of kind: UICollectionElementKindCell with identifier v-template-0 - must register a nib or a class for the identifier or connect a prototype cell in a storyboard ***** Fatal JavaScript exception - application has been terminated. ***** Native stack trace: 1 0x10cb97bce NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 2 0x10cbe6824 -[TNSRuntime executeModule:referredBy:] 3 0x10b5c31b3 main 4 0x10f4471fd start 5 0x1 JavaScript stack trace: UIApplicationMain(file:///node_modules/@nativescript/core/application/application.js:312:26) at run(file:///node_modules/@nativescript/core/application/application.js:312:26) at file:///node_modules/nativescript-vue/dist/index.js:12597:2 at file:///node_modules/nativescript-vue-devtools/index.js:118:25 at file:///app/bundle.js:2617:10 at ./app.js(file:///app/bundle.js:2621:34) at __webpack_require__(file:///app/webpack/bootstrap:750:0) at checkDeferredModules(file:///app/webpack/bootstrap:43:0) at webpackJsonpCallback(file:///app/webpack/bootstrap:30:0) at anonymous(file:///app/bundle.js:2:61) at evaluate([native code]) at moduleEvaluation([native code]) at [native code] at asyncFunctionResume([native code]) at [native code] at promiseReactionJob([native code]) JavaScript error: file:///node_modules/@nativescript/core/application/application.js:312:26: JS ERROR Error ***** Fatal JavaScript exception - application has been terminated. ***** Native stack trace: 1 0x10cb97bce NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 2 0x10cbe41a6 -[TNSRuntimeInspector reportFatalError:] 3 0x10b5c563b TNSInspectorUncaughtExceptionHandler 4 0x10edf836d __handleUncaughtException 5 0x10e7b9c05 _objc_terminate() 6 0x10f290c87 std::__terminate(void (*)()) 7 0x10f29340b __cxa_get_exception_ptr 8 0x10f2933d2 __cxxabiv1::exception_cleanup_func(_Unwind_Reason_Code, _Unwind_Exception*) 9 0x10e7b9ad6 _objc_exception_destructor(void*) 10 0x10cb980fd NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 11 0x10cbe6824 -[TNSRuntime executeModule:referredBy:] 12 0x10b5c31b3 main 13 0x10f4471fd start 14 0x1 JavaScript stack trace: JavaScript error: JS ERROR Error: NativeScript encountered a fatal error: Error at UIApplicationMain(file:///node_modules/@nativescript/core/application/application.js:312:26) at run(file:///node_modules/@nativescript/core/application/application.js:312:26) at file:///node_modules/nativescript-vue/dist/index.js:12597:2 at file:///node_modules/nativescript-vue-devtools/index.js:118:25 at file:///app/bundle.js:2617:10 at ./app.js(file:///app/bundle.js:2621:34) at __webpack_require__(file:///app/webpack/bootstrap:750:0) at checkDeferredModules(file:///app/webpack/bootstrap:43:0) at webpackJsonpCallback(file:///app/webpack/bootstrap:30:0) at anonymous(file:///app/bundle.js:2:61) at evaluate([native code]) at moduleEvaluation([native code]) at [native code] at asyncFunctionResume([native code]) at [native code] at promiseReactionJob([native code]) NativeScript caught signal 6. Native Stack: 1 0x10cbe5481 sig_handler(int) 2 0x10f8365fd _sigtramp 3 0xed80537 4 0x10f570b7c abort 5 0x10f291858 abort_message 6 0x10f290cad std::__terminate(void (*)()) 7 0x10f29340b __cxa_get_exception_ptr 8 0x10f2933d2 __cxxabiv1::exception_cleanup_func(_Unwind_Reason_Code, _Unwind_Exception*) 9 0x10e7b9ad6 _objc_exception_destructor(void*) 10 0x10cb980fd NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 11 0x10cbe6824 -[TNSRuntime executeModule:referredBy:] 12 0x10b5c31b3 main 13 0x10f4471fd start 14 0x1 JS Stack: