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

Question

对 Nativescript 和 Vue 非常陌生，所以请原谅我半生不熟的问题。

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

代码如下：

<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 在点击事件时显示图像

Nativescript-vue display an image on tap event

vue.js

nativescript

nativescript-vue