Question

Nativescript和Vue非常陌生，所以请原谅我未解决的问题。

我正在尝试构建一个小型应用程序，其中有一个图像标签和一个按钮，按下按钮时，图像应显示，我希望将此图像源作为变量传递，但是按该按钮，我的应用程序崩溃，我在nativescript游乐场中编写了此代码。

代码如下：

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <StackLayout class="home-panel">

                <Image src="{{img_src}}" @tap="onImgTap" />
                <Button text="Button" @tap="onButtonTap" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
     const imageSourceModule = require("tns-core-modules/image-source");
     const imageSourceModule = require("tns-core-modules/image-source");
     const fileSystemModule = require("tns-core-modules/file-system");
    export default {

    methods: {
        onButtonTap() {
            console.log("Button was pressed");
             img_src:native_img
        },
        onImgTap(){
            alert("Dont press image !");

        }
    },

    data() {
        return {
            native_img:"https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"
        };
    },

}

</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>

真的很感谢您的帮助。

关于，〜哈里

Answer 1

您的应用程序崩溃，因为您无法将值分配给变量img_src:native_img。应该是

onButtonTap() {
   console.log("Button was pressed");
   this.img_src=native_img;
}

还需要在数据中定义img_src:""

data() {
return {
 native_img:"https://play.nativescript.org/dist/assets/img/NativeScript_logo.png",
 img_src:""
     };
}

在HTML中，src = {{{img_src}}}到：src = img_src

<Image :src="img_src" @tap="onImgTap" />

Nativescript-vue在点击事件中显示图像

1 个答案: