When i create touchable-opacity or buttons using v-for loop, the on-press functions of all buttons are called even though i haven't touch any of them. But there isn't any problem with normal button using the same function as handler.
<view v-for="taskDay in buttons" :key="taskDay.id" class="task-day">
<touchable-opacity
v-for="task in taskDay.next"
:key="task.id"
:on-press="handleTouch(task.id)"
class="task">
</touchable-opacity>
</view>
methods: {
handleTouch: function(id) {
console.log(id);
}
},
There isn't much on the internet about vue native. Can anyone help?
I am facing exactly the same issue....
UPDATE: I dived more deep in the topic, and it turned out is a known issue in native base.
Checkbox is touchable opacity in react native, and button as well with a composition of views in some order, thats why you have problems in both cases.
See the native base issue in github:
https://github.com/GeekyAnts/NativeBase/issues/3038
However, I could find a workaround. This is not exactly a checkbox, I use tick icon to display that the item is checked, and I iterate through a touchable opacity from native base. But with some styling you can create a checkbox I am sure.
<scroll-view
:content-container-style="{
contentContainer: {
paddingVertical: 20
}
}"
>
<touchable-opacity
v-for="(item, index) in dataArray"
:key="index"
:onPress="
() => {
checkItem(index)
}
"
>
<text>{{ item.time }} - {{ item.name }}</text>
<image
:style="{ height: 15, width: 15, marginLeft: 15 }"
:source="require('../../../assets/icons/done.png')"
v-if="item.checked"
/>
</touchable-opacity>
</scroll-view>
In the checkItem method I use splice and replace the item to preserve reactivity:
methods: {
checkItem(index) {
this.dataArray[index].checked = true
this.dataArray.splice(index, 1, this.dataArray[index])
}
},
My dataArray is an array like that:
[{id: 1, name: 'Name', checked: true}, {id: 2, name: 'Name', checked: false}]
I hope it will help to resolve your problem.
Related
I'm trying to have different text colors for my breadcrumbs based on a property but I can't figure out how to apply those colors anywhere. Can't add a color or class in the items either.
breadcrumbItems() {
return [
{
text: this.$t("receiving.breadcrumbs.step1"),
disabled: this.item.Status !== "STEP1"
},
{
text: this.$t("receiving.breadcrumbs.step2"),
disabled: this.item.Status !== "STEP2"
},
{
text: this.$t("receiving.breadcrumbs.step3"),
disabled: this.item.Status !== "STEP3"
}
];
}
<v-breadcrumbs :items="breadcrumbItems" class="breadStyle">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
</v-breadcrumbs>
Looking at the API for v-breadcrumbs: https://vuetifyjs.com/en/api/v-breadcrumbs-item/ it doesn't provide a property "color" or something similar, but there is a slot, so you can pass any kind of components in it.
You can create a <span> and customize its color and its style depending on the items:
<template>
<v-breadcrumbs :items="items">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
<template v-slot:item="{ item }">
<v-breadcrumbs-item :disabled="item.disabled">
<span :style="`color: ${item.color}`">
{{ item.text.toUpperCase() }}
</span>
</v-breadcrumbs-item>
</template>
</v-breadcrumbs>
</template>
<script>
export default {
data: () => ({
items: [
{
text: "Dashboard",
disabled: false,
color: "green",
},
{
text: "Link 1",
disabled: false,
color: "blue",
},
{
text: "Link 2",
disabled: true,
color: "red",
},
],
}),
};
</script>
I've found that the deep selector (https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) often helps with styling Vuetify components. I added this to my components scoped CSS and the colours work just fine for links:
.v-breadcrumbs >>> a {
color: purple;
}
I found the relevant tag by looking through the Elements-tab under Inspect (in Chrome).
I don't know if this is the best solution for your specific situation, but figured I'd add this for anyone with a simpler use case.
I'm using vuetify and laravel to display some data from an array using vuetify's data table. The data get's displayed on the table fine, but these two errors appear? I need some help as for what I can do to avoid these errors.
Errors:
Error in render: "TypeError: this.items.slice is not a function"
Invalid prop: type check failed for prop "items". Expected Array, got Object
I've tried searching for the Invalid prop error for a while now but still nothing helped. As for the error in render part, this is where I really haven't found anything.
.Vue Data table:
<v-data-table
:headers="headers"
:items="lists"
class="elevation-1"
>
<v-btn color="success">Success</v-btn>
<template v-slot:items="lists">
<td class="text-xs-left">{{ lists.item.Customer }}</td>
<td class="text-xs-right">{{ lists.item.Address }}</td>
<td class="justify-center layout px-0">
<v-icon small class="mr-2" color="teal">visibility</v-icon>
<v-icon small class="mr-2" color="orange darken-2">edit</v-icon>
<v-icon small color="red darken-2">delete</v-icon>
</td>
</template>
script:
<script>
let Add = require('./Add.vue');
export default {
components: { Add },
data () {
return {
lists:{},
errors:{},
headers: [
{
text: 'Customer',
align: 'left',
value: 'Customer'
},
{ text: 'Address', value: 'Address' },
{ text: 'Contact No', value: 'CustomerContactNo' },
],
}
},
mounted(){
axios.post('/getData')
.then((response)=> this.lists = response.data)
.catch((error) => this.errors = error.response.data)
}
}
</script>
How do I avoid these errors? Any help is appreciated, Thanks.
Both errors suggest you have a prop called items that is being passed an object instead of an array.
A candidate would be the prop called items here:
<v-data-table
:headers="headers"
:items="lists"
class="elevation-1"
>
Based on those errors we can guess that the value lists might incorrectly be an object. Digging further, if we take a look in your JS code we find this:
data () {
return {
lists: {},
So your initial value is an object, not an array. Once your remote data shows up it will be replaced with an array and everything will appear to work correctly.
Try changing lists: {}, to lists: [],.
I am showing data with RadListView that has categories and subentries (Nativescript Angular, iOS).
I want to have the page load showing only the categories, and if the user clicks on any category, it toggles the entries (showing on click, then hiding on another click).
Is this possible?
I have not seen this successfully accomplished with the current version of pro ui and NS. I have not been able to get it to work myself.
Further details about other approaches are here.
There is an NS accordion plugin, but I think the goal here should be possible with straight code, especially because in my case I want to customize a fair bit.
I have run into two problems:
1) How do I isolate the click on category itself? The grouping function seems to "hide" the category title programmatically--I have not been able to know when the user clicks on it (instead of registering just clicks on the whole group) and have not been able to style that group header.
2) Once the category header is clicked, how do I show / hide the entries below? Normally, I would use something like visibility="{{isClicked ? 'visible' : 'collapsed'}}, but that is not working with RadListView.
Here is some sample code to give a better sense of the goal:
html:
<GridLayout >
<RadListView [items]="places" selectionBehavior="Press" (itemSelected)="itemSelected($event)" [groupingFunction]="myGroupingFunc" >
<ng-template tkListItemTemplate let-place="item" >
<StackLayout>
<Label [text]="place.city"></Label>
<Label [text]="place.people" ></Label> //NOTE: I have not yet determined how to show this second level data within RadListView.
</StackLayout>
</ng-template>
</RadListView>
</GridLayout>
ts:
import { Component, OnInit, } from "#angular/core";
import { Router, } from "#angular/router";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { RadListView, ListViewEventData, } from "nativescript-ui-listview";
#Component({
selector: "Sample",
moduleId: module.id,
templateUrl: "./sample.component.html",
})
export class SampleComponent implements OnInit {
public places = [
{country: 'US', city: 'New York', people: [{name: 'Bill', age: 22}, {name: 'Suzy', age: 23} ] },
{country: 'US', city: 'Los Angeles', people: [{name: 'Sarah', age: 21}, {name: 'Barb', age: 23} ] },
{country: 'Canada', city: 'Toronto', people: [{name: 'Fred', age: 30}, {name: 'Ted', age: 31} ] },
{country: 'England', city: 'London', people: [{name: 'Jim', age: 22}, {name: 'Joe', age: 19} ] }
]
constructor() {
}
myGroupingFunc(value) {
return value.country;
}
itemSelected(args) {
/***is there a way this can isolate the tap on country name?*****/
}
}
To make the header entries clickable, you can use tkGroupTemplate with categories (<ng-template tkGroupTemplate let-category="category"> ), as further detailed in the answer here.
However, toggling show and hide entries is not currently supported in iOS with Nativescript. See further discussion here. From this discussion, it looks like you can show/hide entries. However, on iOS, the app will not shrink the area on hide or enlarge the area on show. The area will stay the same as it is when loaded, whether or not the entries are shown. It looks like Android does not have this limitation.
The nativescript accordion plugin provides some help for toggling, even though some features have yet to be ironed out. If anyone is desparate for an accordion on Nativescript iOS, that is probably the place to start.
I have a checkbox for each row within a kendo grid. If the user sorts or filters the grid, the checkmarks are cleared from the checkboxes. How can I prevent the checkboxes from unchecking or re-check them after the sort or filter occurs? Please refer to the following js fiddle to observe the behavior during sorting:
http://jsfiddle.net/e6shF/33/
Here's the code on the jsfiddle for reference (...needed to ask this question):
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
columns:[
{
field:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
basically the selection is cleared each time because the Grid is redrawn. You can store the check items in an array or object and when the Grid is redrawn (dataBound event) you can mark them again as checked.
To simplify things here is an updated version of you code. Also use the headerTemplate option to set header template - do not name your field like template instead.
var array = {};
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
dataBound:function(){
for(f in array){
if(array[f]){
$('#'+f).attr('checked','checked');
}
}
},
columns:[
{
headerTemplate:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
var grid = $('#grid').data().kendoGrid;
$('#grid tbody').on('click',':checkbox',function(){
var id = grid.dataItem($(this).closest('tr')).id;
if($(this).is(':checked')){
array[id] = true;
}else{
array[id] = false;
}
})
Link to the fiddle
If you are not too concerned about old browsers HTML5 storage might work for you
http://www.w3schools.com/html/html5_webstorage.asp
And of course jQuery comes with its own data storage capability.
I want to use qtip with jqgrid and show a different image depending on which row is selected within the jqgrid. The path of the image could be within the jqgrid as a hidden cell. I have looked around but can't find any documentation on if jqgrid has a relevant row selector that could be used. Does anyone know the selector I want or if I should be trying for a different approach altogether?
The only selector that worked so far is below but it is for the entire grid. I have tried a few things to specify the row but nothing has worked. Any help would be appreciated.
$('#gridtable').qtip({
content: 'Some text',
show: 'mouseover',
hide: 'mouseout',
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
}
});
My solution was to place an icon within each row that had a wine image and assign it the id of the row. This meant that each row could be given a unique class to hover over. Not pretty but it worked.
if((gridRow['photo'] != "false"))
{
$("#gridtable2").jqGrid('setRowData',i+1,{wine:'<div class ="imageicon'+i+'">'+ret['wine']+' <img src=\"images/icon-wine.png\" height="16" width="13"/></div>'});
path = '<img src="images/winephotos/'
+ gridRow['id']
+'.jpg" width="350" height="450" alt="Wine Image"'
+' class="resize"/>';
$('.imageicon'+i).qtip({
content: $(path)
,
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
},
show: {
when: 'click',
//ready: true,
solo: true
},
hide: {
when: {
event: 'click',
event: 'mouseout'
}
},
style: {
width: { max: 280 },
name: 'dark'
}
});
}
gridRow=false;
}