Related
my code copied from example:
example:https://flowbite-svelte.com/components/carousel
`
<script>
import { Carousel } from 'flowbite-svelte';
let imageList = [
{
id: 0,
name: 'Cosmic timetraveler',
imgurl: '/images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.webp',
attribution: 'cosmic-timetraveler-pYyOZ8q7AII-unsplash.com'
},
{
id: 1,
name: 'Cristina Gottardi',
imgurl: '/images/carousel/cristina-gottardi-CSpjU6hYo_0-unsplash.webp',
attribution: 'cristina-gottardi-CSpjU6hYo_0-unsplash.com'
},
{
id: 2,
name: 'Johannes Plenio',
imgurl: '/images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.webp',
attribution: 'johannes-plenio-RwHv7LgeC7s-unsplash.com'
},
{
id: 3,
name: 'Jonatan Pie',
imgurl: '/images/carousel/jonatan-pie-3l3RwQdHRHg-unsplash.webp',
attribution: 'jonatan-pie-3l3RwQdHRHg-unsplash.com'
},
{
id: 4,
name: 'Mark Harpur',
imgurl: '/images/carousel/mark-harpur-K2s_YE031CA-unsplash.webp',
attribution: 'mark-harpur-K2s_YE031CA-unsplash'
},
{
id: 5,
name: 'Pietro De Grandi',
imgurl: '/images/carousel/pietro-de-grandi-T7K4aEPoGGk-unsplash.webp',
attribution: 'pietro-de-grandi-T7K4aEPoGGk-unsplash'
},
{
id: 6,
name: 'Sergey Pesterev',
imgurl: '/images/carousel/sergey-pesterev-tMvuB9se2uQ-unsplash.webp',
attribution: 'sergey-pesterev-tMvuB9se2uQ-unsplash'
},
{
id: 7,
name: 'Solo travel goals',
imgurl: '/images/carousel/solotravelgoals-7kLufxYoqWk-unsplash.webp',
attribution: 'solotravelgoals-7kLufxYoqWk-unsplash'
}
];
</script>
<div class="max-w-4xl">
<Carousel {imageList} />
</div>
error:
Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length')
at eval (/node_modules/flowbite-svelte/carousels/Carousel.svelte:50:32)
at Object.$$render (/node_modules/svelte/internal/index.mjs:1876:22)
at eval (/src/routes/+page.svelte:62:125)
at Object.$$render (/node_modules/svelte/internal/index.mjs:1876:22)
at Object.default (root.svelte:41:38)
at eval (/src/routes/+layout.svelte:26:67)
at Object.$$render (/node_modules/svelte/internal/index.mjs:1876:22)
at root.svelte:40:37
at $$render (/node_modules/svelte/internal/index.mjs:1876:22)
at Object.render (/node_modules/svelte/internal/index.mjs:1884:26)
`
i chceck with console.log imageList is array and has property leght
i think this is some kind of bug in svelte
when i randomly reload my website sometime code work propertly
how i can debug this?
i also tried
{#await promise}
but the same error
I'm making a budget tracker app. And I'm implementing the functions display and add transactions for the app. However, I'm struggling to find a way to dynamically set the image URL (the icon) based on the transaction category type.
The app is written in React Native.
For example, I have a list of transactions as below:
[
{
id: 1,
type: 'Expense',
category: 'Food',
description: 'Burger',
amount: 100,
date: '2020-10-10',
createdAt: '2021-01-01',
},
{
id: 2,
type: 'Expense',
category: 'Entertainment',
description: 'Movie',
amount: 200,
date: '2020-10-10',
createdAt: '2021-10-02',
},
{
id: 3,
type: 'Income',
category: 'Salary',
description: 'Salary',
amount: 1000,
date: '2020-10-10',
createdAt: '2021-10-03',
},
{
id: 4,
type: 'Expense',
category: 'Food',
description: 'Burger',
amount: 100,
date: '2020-10-10',
createdAt: '2021-01-01',
},
]
Then I want to display it in a list, and each list item contains the icon representing the category, like this image:
You can just import images and add them as a key like this :
import burgerImage from '../images/burger.jpg';
import movieImage from '../images/movie.jpg';
[
{
id: 1,
type: 'Expense',
category: 'Food',
description: 'Burger',
amount: 100,
date: '2020-10-10',
createdAt: '2021-01-01',
icon: burgerImage,
},
{
id: 2,
type: 'Expense',
category: 'Entertainment',
description: 'Movie',
amount: 200,
date: '2020-10-10',
createdAt: '2021-10-02',
icon: movieImage
},
]
Pass the icon key as a source to Image component like this :
data.map((datum)=> <Image source={datum.icon} />);
I think you should use category field to render icon be like:
const renderIcon = (icon) => {
switch (icon) {
case "Food":
return <Icon icon="food" />
case "Movie":
return <Icon icon="movie" />
// Diff case
default:
return <Icon icon="iconDefault" />
}
And in renderItem of FlatList:
const renderItem = ({ item, index }) => {
return (
// render wrapper
{renderIcon(item.category)}
// render name, time, price of product
)
}
I have a v-treeview component (Vuetify 2.6.7)
<v-treeview
class="location-tree"
v-model="location_tree"
ref="location_tree"
:search="location_search"
selectable
dense=true
open-on-click=true
expand-icon="$plus"
selected-color="success"
:items="locations"
selection-type="all"
transition=true
#input="location_tree_update"
></v-treeview>
How can I uncheck all checkboxes with a some button click?
you just need to empty the array you passed to v-model on a button click like location_tree.splice(0) or location_tree = [].
check the example below:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selection: [],
items: [{
id: 1,
name: 'Applications :',
children: [{
id: 2,
name: 'Calendar : app'
},
{
id: 3,
name: 'Chrome : app'
},
{
id: 4,
name: 'Webstorm : app'
},
],
},
{
id: 5,
name: 'Documents :',
children: [{
id: 6,
name: 'vuetify :',
children: [{
id: 7,
name: 'src :',
children: [{
id: 8,
name: 'index : ts'
},
{
id: 9,
name: 'bootstrap : ts'
},
],
}, ],
},
{
id: 10,
name: 'material2 :',
children: [{
id: 11,
name: 'src :',
children: [{
id: 12,
name: 'v-btn : ts'
},
{
id: 13,
name: 'v-card : ts'
},
{
id: 14,
name: 'v-window : ts'
},
],
}, ],
},
],
},
{
id: 15,
name: 'Downloads :',
children: [{
id: 16,
name: 'October : pdf'
},
{
id: 17,
name: 'November : pdf'
},
{
id: 18,
name: 'Tutorial : html'
},
],
},
{
id: 19,
name: 'Videos :',
children: [{
id: 20,
name: 'Tutorials :',
children: [{
id: 21,
name: 'Basic layouts : mp4'
},
{
id: 22,
name: 'Advanced techniques : mp4'
},
{
id: 23,
name: 'All about app : dir'
},
],
},
{
id: 24,
name: 'Intro : mov'
},
{
id: 25,
name: 'Conference introduction : avi'
},
],
},
],
}),
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-btn color="primary" #click="selection.splice(0)">clear selection</v-btn>
<v-treeview v-model="selection" selectable :items="items"></v-treeview>
</v-container>
</v-app>
</div>
how can i do something like that in React-Native:
data = [
{id:1,title:'Action',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
{id:2,title:'Horror',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
]
Every time the query string is updated, look for the game within the category.
Returns only the categories that contain a game with the searched characters.
Thank you! :D
I don't know if I understand your question correctly. This is my solution.
If you query for "Game5" you will get whole object that contains query
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game4" },
{ id: 2, title: "Game5" },
{ id: 3, title: "Game6" },
],
},
];
const query = "Game5";
const result = data.find((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
You can use 'filter' instead of 'find' and result will be an array.
This is example of filter version. I add one more category so you can see how it filter
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game2";
const result = data.filter((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
And you might want to look at life cycle componentDidUpdate if you write class component, but if you write function component you might want to use useEffect
This is official react hook explaination
EDIT: from your comment you might want something like this
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game5";
let result = null;
data.forEach((category) => {
const game = category.games.filter((g) => g.title === query);
if (game.length) result = { ...category, games: game };
});
console.log(result);
I have a vuetify treeview that I am trying to use for creating a menu. The treeview works fine however I am unable to add a router-link to Vuetify treeview using template. I have created a codepen here. What am I missing?
template:
<div id="app">
<v-app id="inspire">
<v-treeview open-all dense :items="items">
<template v-slot:prepend="{ item }">
<router-link v-bind:to="`{name:item.to, params:{domain:item.domain}`" >{{item.name}}</router-link>
</template>
</v-treeview>
</v-app>
</div>
script:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{
id: 1,
name: 'Applications :',
to:'applications',
domain:'clearcrimson',
children: [
{ id: 2, name: 'Calendar : app', to:'calendar',
domain:'clearcrimson'},
{ id: 3, name: 'Chrome : app', to:'chrome',
domain:'clearcrimson' },
{ id: 4, name: 'Webstorm : app', to:'webstorm',
domain:'clearcrimson' },
],
},
{
id: 5,
name: 'Documents :',
children: [
{
id: 6,
name: 'vuetify :',
children: [
{
id: 7,
name: 'src :',
children: [
{ id: 8, name: 'index : ts' },
{ id: 9, name: 'bootstrap : ts' },
],
},
],
},
{
id: 10,
name: 'material2 :',
children: [
{
id: 11,
name: 'src :',
children: [
{ id: 12, name: 'v-btn : ts' },
{ id: 13, name: 'v-card : ts' },
{ id: 14, name: 'v-window : ts' },
],
},
],
},
],
},
{
id: 15,
name: 'Downloads :',
children: [
{ id: 16, name: 'October : pdf' },
{ id: 17, name: 'November : pdf' },
{ id: 18, name: 'Tutorial : html' },
],
},
{
id: 19,
name: 'Videos :',
children: [
{
id: 20,
name: 'Tutorials :',
children: [
{ id: 21, name: 'Basic layouts : mp4' },
{ id: 22, name: 'Advanced techniques : mp4' },
{ id: 23, name: 'All about app : dir' },
],
},
{ id: 24, name: 'Intro : mov' },
{ id: 25, name: 'Conference introduction : avi' },
],
},
],
}),
})