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>```
Related
im getting below error while i'm iterate CartItem.
Property or method "item" is
not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
why this error is showing and how can i solve this.
[Note : this is a nativescript vue project]
<ListView
v-for="(item, index) in cartItems"
:key="index"
height="1000"
class="listCard"
>
<v-template>
<GridLayout
rows="auto"
columns="auto,*3,auto"
backgroundColor="white"
class="innerList"
>
<StackLayout orientation="horizontal" col="0" row="0">
<Button>
<FormattedString>
<Label
class="fa fas"
:text="'fa-trash' | fonticon"
fontSize="30"
></Label>
</FormattedString>
</Button>
<Image :src="item.imageUrl" height="80" width="auto"></Image>
</StackLayout>
<StackLayout col="1" row="0">
<Label
:text="item.title"
textWrap="true"
class="font-weight-bold"
color="#333333"
></Label>
<Label :text="item.color" color="#999999"></Label>
<Label :text="'USD ' + item.price" color="red"></Label>
</StackLayout>
<StackLayout orientation="horizontal" col="2" row="0">
<Button
text="-"
#tap="onDecriment(index)"
class="operatorButton operatorBox"
marginRight="0"
/>
<Label
class="operatorLabel operatorBox"
:text="item.quantity">
</Label>
<Button
text="+"
#tap="onIncrement(index)"
class="operatorButton operatorBox"
marginLeft="0"
/>
</StackLayout>
</GridLayout>
</v-template>
</ListView>
I don't see any error in your code but can you try using for instead of v-for. I see in this example, Listview is being using with for.
As per docs: If a v-for is used on a <ListView> a warning will be printed to the console, and it will be converted to the **for** property. you can read more about Listview with for here
<ListView
for="(item, index) in cartItems"
:key="index"
height="1000"
class="listCard"
>
....
In a Xamarin.Forms project, I need to concatenate a Localized String value with a binding of a string property,
I want to achieve something like,
<Label Text="{Binding Name}",
StringFormat='Created By {0}' />
but Created By string should come from,
LocalizedStrings.CreatedBy
How can I achieve this?
in the xaml, add a name to reference the label,
<Label x:Name="myLabel" />
in the code-behind,
myLabel.SetBinding(
Label.TextProperty,
new Binding(nameof(MyModal.Name), stringFormat: $"{LocalizedStrings.CreatedBy} {{0}}"));
this way we can format the binding string properties with variable values.
Alternative Approach:
You can also use FormattedText property of the Label as follows, however this is not an optimized approach.
Import LocalizedStrings to xmlns:Resources, then,
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static Resources:LocalizedStrings.CreatedBy}" />
<Span Text="{Binding Name, StringFormat=' {0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
It's achievable by using the ForamttedText Property of Label. MS Docs link
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static Resources:LocalizedStrings.CreatedBy}" />
<Span Text="{Binding Name, StringFormat=' {0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
where Resources is an import for LocalizedStrings
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
I have place a Tabview in my component with 2 tabs. In the first i'm loading some data from an API and render a ListView with data. In the other tab i'm showing some other data.
The data from the API is not showing when the component is first show, I have tab press the tab 2 and then tab 1 and the data is then shown.
<template>
<Page class="page">
<TabView :selectedIndex="selectedIndex"
#selectedIndexChange="indexChange">
<TabViewItem title="Tab 1">
<StackLayout orientation="vertical">
<ListView height="90%" class="list-group"
for="item in allCategories">
<v-template>
<StackLayout class="list-group-item"
orientation="horizontal">
<Image :src="item.imageURL"
stretch="aspectFill" class="categoryImage"
width="75" height="75">
</Image>
<Label class="categoryText"
:text="item.element.groupText"/>
</StackLayout>
</v-template>
</ListView>
</StackLayout>
</TabViewItem>
<TabViewItem title="Tab 2">
<Label text="Content for Tab 2" />
</TabViewItem>
</TabView>
</Page>
</template>
created: function () {"url").then(result => {
result.data.forEach(element => {
var imageURL = element.image.imageURL;
this.allCategories.push({element, imageURL })
});
}, error => {
console.log(error);
});
},
I want the data to be show when the component is first show because the tab 1 is marked as the showing tab. Any ideas?
Here is an example in the playground: https://play.nativescript.org/?template=play-vue&id=9Fk7AS&v=10
The answear is in the issue I commited for the repository in github: https://github.com/nativescript-vue/nativescript-vue/issues/515
Just change:
<TabView :selectedIndex="selectedIndex" #selectedIndexChange="indexChange">
To:
<TabView>