I've been attempting to incorporate the nativescript-checkbox plugin into my vue application. Unfortunately, the example provided by Vue is lacking in clarity. It does not specify whether or not to import the class into the component.
Despite trying various methods, importing nativescript-checkbox into my component did not result in it being displayed. I even experimented with using CheckBox instead of check-box as recommended in the documentation.
In main.js
Vue.registerElement('CheckBox', () => require('nativescript-checkbox').CheckBox, {
model: {
prop: 'checked',
event: 'checkedChange'
}
});
in Tasks.vue
<template>
<Page class="page">
<ActionBar class="action-bar">
<NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>
<ActionItem icon="res://navigation/menu"
android:visibility="collapsed"
@tap="onDrawerButtonTap"
ios.position="left">
</ActionItem>
<Label class="action-bar-title" text="Tasks"></Label>
</ActionBar>
<GridLayout class="page-content">
<ListView for="task in tasks">
<v-template>
<check-box :text="task.text" style="width: 25%" />
<Label :text="task.text" class="item" style="width: 75%" />
</v-template>
</ListView>
</GridLayout>
</Page>
</template>
<script>
import * as utils from "~/shared/utils";
import SelectedPageService from "../shared/selected-page-service";
import CheckBox from 'nativescript-checkbox';
export default {
components: { CheckBox },
mounted() {
SelectedPageService.getInstance().updateSelectedPage("Tasks");
},
data() {
return {
tasks: [
{'text': 'One'},
{'text': 'Two'},
{'text': 'Three'}
],
isChecked: false
}
},
computed: {
message() {
return "Tasks Page";
}
},
methods: {
onDrawerButtonTap() {
utils.showDrawer();
}
}
};
</script>
<style scoped lang="scss">
@import '../app-variables';
.item {
padding: 20px;
}
</style>