Question

我正在尝试将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>

Answer 1

要将两个或多个组件包装在一起时，必须始终使用布局。所以尝试，

        <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>

nativescript-checkbox不会显示

1 个答案: