very new to Nativescript and Vue so please excuse my half baked question.
I am trying to build a small app in which i have an image tag and a button, on press of a button, the image should display, i would like this image source to be passed on as a variable, but on pressing the button, my app crashes, i am writing this in nativescript playground.
here is the code:
<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>
really appreciate any help.!
Regards,
~Harry
Your app is crashing as your to assign value to variable img_src:native_img is incorrect.
It should be,
onButtonTap() {
console.log("Button was pressed");
this.img_src=native_img;
}
Also in data need to define img_src:""
data() {
return {
native_img:"https://play.nativescript.org/dist/assets/img/NativeScript_logo.png",
img_src:""
};
}
Also in Html, src={{img_src}} to :src=img_src
<Image :src="img_src" #tap="onImgTap" />
Related
I managed to put the default navigation buttons of swiper.js, but I would like to be able to set up custom buttons and use the slideNext() and slidePrev() methods when clicking on them.
Unfortunately, I tried several methods, but nothing worked, and I have no idea how to do this with sveltekit.
Thanks for your help!
My code :
<script>
import SwiperSlide from './SwiperSlide.svelte';
import { register } from 'swiper/element/bundle';
register();
</script>
<swiper-container
navigation={true}
slides-per-view={1}
direction="horizontal"
space-between={30}
centered-slides={true}
keyboard={true}
pagination={{
hideOnClick: false,
clickable: true
}}
>
<SwiperSlide id={1} />
<SwiperSlide id={0} />
<SwiperSlide id={2} />
</swiper-container>
<style>
swiper-container {
width: 80%;
height: 100vh;
max-height: 1000px;
padding: 50px 0;
}
</style>
<SwiperSlide> is a component with a <swiper-slide></swiper-slide>.
I'm using Nativescript playground IOS and I'm new to Nativescript. I'm trying to add a button linking to a website when clicked.
<template>
<Page>
<ActionBar title="About Me" />
<ScrollView>
<StackLayout class="home-panel">
<!--Add your page content here-->
<Image
src="https://nexus.leagueoflegends.com/wp-content/uploads/2020/01/01_Banner_Fiddlesticks_Concept_9j7dhjnqxbpc7o0qibqp.jpg"
style="height:800px" />
<Label textWrap="true" text="Play with NativeScript!"
class="h2 description-label" />
<Label textWrap="true"
text="Favorite Type Of Noodles: Ravioli."
class="h2 description-label" />
<Button text="Button" #tap="onButtonTap" class="-primary" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
methods: {
onItemTap: function(args) {
console.log("Item with index: " + args.index + " tapped");
},
onButtonTap() {
console.log("Button was pressed");
}
},
data() {
return {};
}
};
</script>
<style scoped>
.home-panel {
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
I tried location.href = 'www.yoursite.com';
But the app just crashes for some reason.
Any help would be appreciated!
You should be able to use openUrl to open a website on your browser:
import { openUrl } from "tns-core-modules/utils/utils";
openUrl('your website url here');
I am learning Vue Native, specifically the v-if conditional, and have the following test code:
<template>
<view class="container">
<button :on-press="seen = !seen" title="Click to Toggle Message Visibility" />
<text v-if="seen">Now you see the message</text>
</view>
</template>
<script>
export default {
data: function() {
return {
seen: false
};
}
};
</script>
<style>
.container {
flex: 1;
align-items: center;
justify-content: center;
}
</style>
It is supposed to let the user click the button and the message is to appear/disappear. However, it is resulting in the following error:
console.error: "[Vue warn]: You may have an infinite update loop in a component render function. (found in )"
How should the code be modified so it works?
The problem is that vue is treating :on-press="seen = !seen" like a binding so it always executes the expression on render. The rendering is modifying the state, hence causing an infinite loop.
I think you just need to extract it in a function.
<template>
<view class="container">
<button :on-press="onPress" title="Click to Toggle Message Visibility" />
<text v-if="seen">Now you see the message</text>
</view>
</template>
<script>
export default {
data: function() {
return {
seen: false
};
},
methods: {
onPress() {
this.seen = !this.seen;
}
}
};
</script>
<style>
.container {
flex: 1;
align-items: center;
justify-content: center;
}
</style>
Agree with the accepted answer. In addition, the :on-press is an attribute binding, but using v-on event binding will not have this infinite loop issue, for example, like <button v-on:click="seen = !seen" title="Click to Toggle Message Visibility" />. That's probably where you get this inline method usage seen = !seen from.
Below nativescript-vue code I'm parsing a json file and trying to print it, but some reason I can't print json.city.value in Label, but I can print it inside script part, inside readFromJson method console.log(json.city.value) is working, and in Label tag also I can print parsedJson.city, but not parsedJson.city.value is value a keyword or preserved variable for nativescript or vuejs?
Below you can find, simplified code of what I'm trying to do.
<template>
<Page>
<ActionBar title="Welcome to NativeScript-Vue!"/>
<GridLayout columns="*" rows="*">
<Label class="message" :text="parsedJson.city.value" col="0" row="0"/>
</GridLayout>
</Page>
</template>
<script >
let json2 = '{"approved":{"type":"Boolean","value":true,"valueInfo":{}},"city":{"type":"String","value":"Konstanz","valueInfo":{}},"street":{"type":"String","value":"Reichenaustraße 11","valueInfo":{}},"contractNumber":{"type":"String","value":"3847384contractNumber","valueInfo":{}},"description":{"type":"String","value":"","valueInfo":{}}}'
export default {
data() {
return {
msg: 'Hello World!',
parsedJson: {}
}
},
mounted() {
console.log("mounted is worked")
console.log("json to parse is: " + json2)
this.readFromJson(json2)
},
methods: {
readFromJson(input) {
console.log("inside readfromjson")
var json = JSON.parse(input)
console.log("parsed city.value is: " + json.city.value)
this.parsedJson = json
}
}
}
</script>
<style scoped>
ActionBar {
background-color: #53ba82;
color: #ffffff;
}
.message {
vertical-align: center;
text-align: center;
font-size: 20;
color: #333333;
}
</style>
If I had to guess is that it immediately tries to use a value that is undefined. parsedJson is defined as {} and doesn't get initialized till later. Maybe try initializing it an empty string:
parsedJson: {
city: {
value:''
}
}
I wanna create a basic app that just shows the data fetching from an api. I'm using Vue Native which is the mixture of React Native + Vuejs but after I get the data it doesn't show the data on the page.
My code is:
<template>
<view class="container">
<view v-if="this.cars.length">
<h1>{{this.cars[1][0]['title']}}</h1>
<view v-for="(car, index) in this.cars[1][1]" :key="index">
<image :source="{uri: 'https://example.com'+car['images'][0]['path']}" />
</view>
</view>
<view v-else>
<text>No car!</text>
</view>
</view>
</template>
<style>
.container {
background-color: white;
align-items: center;
justify-content: center;
flex: 1;
}
</style>
<script>
import axios from 'axios';
export default {
data() {
return {
cars: {},
}
},
mounted() {
axios.get('https://example.com/api/cars')
.then(cars => {
this.cars = cars.data;
})
},
}
</script>
You should change cars: {} to cars: []
Then in your v-for="car in cars". Then you can get your data like for example car.Name
That's how it works for me, hope it helps!
Try to save the instance and then run axios
mounted() {
const vm = this
axios.get('https://example.com/api/cars')
.then(cars => {
vm.cars = cars.data;
})
},