флажок nativescript не будет отображаться - PullRequest
Новая
       11

флажок nativescript не будет отображаться

0 голосов
/ 05 июля 2019

Я пытаюсь интегрировать nativescript-checkbox в мое приложение vue. Пример использования Vue не очень ясно, хотя. Они не говорят, следует ли импортировать класс в компонент.

Но я попробовал все это, я импортировал nativescript-checkbox в свой компонент, и он все равно не будет отображаться. Я даже пытался использовать CheckBox вместо check-box из документации.

В main.js

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

в Tasks.vue

<template>
    <Page class="page">
        <ActionBar class="action-bar">
            <!--
            Use the NavigationButton as a side-drawer button in Android
            because ActionItems are shown on the right side of the ActionBar
            -->
            <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>
            <!--
            Use the ActionItem for IOS with position set to left. Using the
            NavigationButton as a side-drawer button in iOS is not possible,
            because its function is to always navigate back in the application.
            -->
            <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">
            <!--<Label class="page-icon fa" text.decode="&#xf0ae;"></Label>
            <Label class="page-placeholder" :text="message"></Label>-->
            <ListView for="task in tasks">
                <v-template>
                    <!-- Shows the list item label in the default color and style. -->
                    <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': 'One1'},
                    {'text': 'Two'},
                    {'text': 'Three'}
                ],
                isChecked: false
            }
        },
        computed: {
            message() {
                return "<!-- Tasks Page -->";
            }
        },
        methods: {
            onDrawerButtonTap() {
                utils.showDrawer();
            }
        }
    };
</script>

<style scoped lang="scss">
    // Start custom common variables
    @import '../app-variables';
    // End custom common variables

    // Custom styles
    .item {
        padding: 20;
    }
</style>

1 Ответ

1 голос
/ 05 июля 2019

Вы всегда должны использовать макет, когда хотите обернуть 2 или более компонентов вместе.Так что попробуйте, 

        <ListView for="task in tasks">
            <v-template>
                <GridLayout columns="auto,*">
                   <!-- Shows the list item label in the default color and style. -->
                   <check-box :text="task.text" col="0" />
                   <Label :text="task.text" class="item" col="1" />
                 </GridLayout>
            </v-template>
        </ListView>
...