My <v-progress-linear> kept changing on click, and I want to prevent that.
<v-progress-linear
v-model="progress"
color="primary"
height="20"
>
Fix: I don't use v-model.
Just use :value
<v-progress-linear
:value="progress"
color="primary"
height="20"
>
I encounter the same issue and I solved it by a hack using a CSS property pointer-events which let the progress-linear element to not react any pointer events:
<v-progress-linear
v-model="progress"
color="primary"
height="20"
style="pointer-events: none"
>
Related
I am iterating over a list (I'm using Vue.js 2 and Vuetify) and I want to have multiple <v-sheet> that have different colors. I've tried:
<v-sheet v-for="color in schema.colors" :key="color" class="float-left"
color="`${color}`"
elevation="1"
height="40"
width="40"
></v-sheet>
but that doesn't set color to the appropriate value.
I've also tried color="{{ color }}", without success. The color variable is set to a valid value, i.e. #1234ab.
If you want to assign variables then you need to use the bind syntax (see the colon before color)
<v-sheet v-for="color in schema.colors" :key="color" class="float-left"
:color="color"
elevation="1"
height="40"
width="40"
></v-sheet>
I would like to do a chatView with Native-vue and for that I use List of view with dynamic array. I have a problem, I don't know how I can fix one view on the left or right side ?
My code is like this:
<ListView class="disposition" row="0" col="1" for="Message in messages" style="height:1250px" #itemLoading="DisplayMessage" >
<v-template>
<label> hey</label>
<StructMSG :class="Message.theme" col="0" top="50" bottom="50" :info="Message"/>
</v-template >
<v-template if="$odd">
<StructMSG :class="Message.theme" col="0" top="50" bottom="50" :info="Message"/>
</v-template>
</ListView>```
In the Array "messages" there are the list of message of chat and I difference sender or reciver with element theme in my array. And I would like to display on left side if it's sender or right side if it's me.
It's good I did it like this:
<v-template >
<Gridlayout columns="*,*">
<StructMSG v-if="Message.theme == 'theme1'" :class="Message.theme" col="0" top="50" bottom="50" :info="Message"/>
<StructMSG v-else :class="Message.theme" col="1" top="50" bottom="50" :info="Message"/>
</Gridlayout>
</v-template>
</ListView>```
I have a list of data and when it renders, it's rendering on top of each other. The data is a fairly long list of objects and I am using multiple fields. I made a playground example by reducing the data list size and only using field (display_name) and it's still happening.
It seems to happen in random spots of the list but I am unsure as to how to resolve or more importantly, why it's happening. I thought it may have had to do with my key not being unique but I made sure it was and it's still happening. I included a playground and added screenshots. Any ideas?
Playground
Screenshots
EDIT: (Adding Template)
<RadListView
for="(movie,index) in this.movies"
ref="listView"
#loaded="onListLoaded($event)"
#itemTap="onItemTap($event)"
itemHeight="50"
:key="index"
gridSpanCount=1
>
<v-template>
<FlexboxLayout class="item-row" :key='`flex` + index' flexDirection="row" width="100%" height="100%" justifyContent="space-between">
<Stacklayout orientation="horizontal">
<Image :key='`img-flag` + index' marginTop="-22" class="flag-image" marginBottom="-22" :src="movie.image" height="100%" />
<Label :key='`display-name` + index' :text="movie.display_name" />
</Stacklayout>
<Image :key='`heart-1` + index' #tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" />
</FlexboxLayout>
</v-template>
</RadListView>
Looking at your mockup, I think you can achieve it with a simple GridLayout.
<v-template>
<GridLayout columns="auto,*,auto" class="list-group-item">
<Image col="0" :src="movie.image"
class="m-5 thumb img-circle">
</Image>
<Label col="1" :text="movie.display_name"></Label>
<Image col="2" src="path_to_icon" class="thumb">
</Image>
</GridLayout>
</v-template>
I hope you can help me to solve my problem.
I am working on a Nativescript-Vue Application and I want to render this conditionally:
<Label if="isRendering" text="This is a text"></Label>
But this does not work.
I already tried it with <v-template if="..."></v-template> but this also does not work.
If i am not mistaken, in Vue.js it is possible to render conditionally with v-if and i am searching for a possibility to make it in Nativescript-Vue.
Thank you
It's the same like in Vue.js.
Instead of using if you should be using v-if.
Playground example
Example:
<Label v-if="isRendering" text="This is a text"></Label>
But if you want to use an if in a ListView it's different.
Example:
<ListView for="item in listOfItems" #itemTap="onItemTap">
<v-template>
<Label :text="item.text" />
</v-template>
<v-template if="$odd">
<!-- For items with an odd index, shows the label in red. -->
<Label :text="item.text" color="red" />
</v-template>
</ListView>
But more info about that in the docs
How can I create carousel with nativescript-vue? I can create couple of single components such as welcome1.vue, welcome2.vue with a button and animation, but I have no idea how can I add the dots to make it real carousel/introduction flow. I know there is an NS plugin for it, but I'm not sure how can I integrate it into vue project.
Any help would be appreciated!
Use https://github.com/manijak/nativescript-carousel
npm install nativescript-carousel
Then run
rm -rf platforms
Register the plugin in your app
Open your app.js or main.js and add the following line at the top:
Vue.registerElement('Carousel', () => require('nativescript-carousel').Carousel)
Vue.registerElement('CarouselItem', () => require('nativescript-carousel').CarouselItem)
Put this into your vue component:
Remember to warp the <Carousel> inside a <GridLayout> if you're Android.
<Carousel height="100%" width="100%"
pageChanged="myChangeEvent" pageTapped="mySelectedEvent"
indicatorColor="#fff000" finite="true" bounce="false"
showIndicator="true" verticalAlignment="top"
android:indicatorAnimation="swap" color="white"
>
<CarouselItem id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
<Label text="Slide 1" backgroundColor="#50000000" horizontalAlignment="center"/>
</CarouselItem>
<CarouselItem id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
<Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center"/>
</CarouselItem>
<CarouselItem id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
<Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center"/>
</CarouselItem>
<CarouselItem id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
<Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center"/>
</CarouselItem>
</Carousel>
then run tns run android --bundle
Did you try nativescript-pager, it has official support for Vue and got a demo app too.