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
Related
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>
Not sure why the data is showing up as undefined. Is the data not formatted correctly? I've tried several ways to adjust it and nest it differently but nothing is working out so far.
<template>
<main>
<AboutMeComponent v-for="i in about" :key="i.posts.id" :title="i.posts.title" :body="i.posts.body" :skills="i.posts.skills"
:img="i.images.img" />
</main>
</template>
<script>
import AboutMeComponent from '../components/AboutMeComponent.vue';
export default {
data() {
return {
about: {
posts: [
{ id: 1, title: "About Me", body: `Body 1` },
{ id: 2, title: "Skills" },
{ id: 3, title: "Hobbies", body: "Body 3" },
],
images: [
{ img: 'figma.png'},
{ img: 'figma.png'},
{ img: 'figma.png'},
]
}
}
},
components: {
AboutMeComponent
}
}
</script>
I think you are need to set the v-for loop on the about.posts, not on the about. Also, if the img is used for the post, I would suggest you keep them with the post, instead of separated.
So your data will be:
data() {
return {
about: {
posts: [
{ id: 1, title: 'About Me', body: 'Body 1', img: 'figma.png' },
{ id: 2, title: 'Skills', body: 'Body 2', img: 'figma.png' },
{ id: 3, title: 'Hobbies', body: 'Body 3', img: 'figma.png' },
],
}
}
},
And now you can loop over about.posts:
<AboutMeComponent v-for="post in about.posts" :key="post.id" :title="post.title" :body="post.body" :img="post.img" />
I left skills out, as they are not in your data.
Just a small suggestion: using variable names as i makes your code harder to understand. If you had used about in about, you would have felt that this was not what you wanted, because you wanted something to do with a post in posts.
Hope this helps.
Few Observations :
As each img in the images array corresponds to each object in the posts array. Merge that into a single one and then use v-for loop for about.posts.
As few properties are missing. Use Optional chaining (?.) operator so that you can read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
Live Demo :
Vue.component('aboutmecomponent', {
props: ['key', 'title', 'body', 'skills', 'img'],
template: '<h3>{{ title }}</h3>'
});
var app = new Vue({
el: '#app',
data: {
about: {
posts: [
{ id: 1, title: "About Me", body: "Body 1" },
{ id: 2, title: "Skills" },
{ id: 3, title: "Hobbies", body: "Body 3" },
],
images: [
{ img: 'figma.png'},
{ img: 'figma.png'},
{ img: 'figma.png'},
]
}
},
mounted() {
this.about.posts = this.about.posts.map((obj, index) => {
const newObj = {
...obj,
...this.about.images[index] }
return newObj;
});
delete this.about.images;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<AboutMeComponent
v-for="item in about.posts"
:key="item?.id"
:title="item?.title"
:body="item?.body"
:skills="item?.skills"
:img="item?.img" >
</AboutMeComponent>
</div>
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' },
],
},
],
}),
})
Vuetify v-treeview how to get the get last selected element?
<v-treeview
v-model="treeModel"
:items="items"
selectable="selectable"
>
by treeModel I have all selected, but how can I get only the last item selected (clicked)?
by only providing the last item's id in the v-model
modified example from https://vuetifyjs.com/en/components/treeview#checkbox-color
option 1 - use v-on/#on update:active
** DOES NOT CURRENTLY WORK FOR VUETIFY v2 **
<div id="app">
<v-app id="inspire">
<v-treeview
v-model="selection"
selectable
selected-color="red"
:items="items"
#update:active="onUpdate"
></v-treeview>
</v-app>
</div>
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: 'Calendar.doc' },
{ id: 7, name: 'Chrome.doc' },
{ id: 8, name: 'Webstorm.doc' },
],
},
],
}),
methods: {
onUpdate(selection) {
console.log(selection)
}
}
})
the problem is that if you're using vuetify v2.0.0 - v2.0.5 the action does not actually work for a selection but for activatable
## option 2 - use watch
this option, at the moment, is preferred. It uses a watch to trigger the action when the `v-model` changes
```html
<div id="app">
<v-app id="inspire">
<v-treeview
v-model="selection"
:items="items"
selectable
></v-treeview>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
watch:{
selection(newValue) {
this.onUpdate(newValue)
}
},
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: 'Calendar.doc' },
{ id: 7, name: 'Chrome.doc' },
{ id: 8, name: 'Webstorm.doc' },
],
},
],
}),
methods: {
onUpdate(selection) {
console.log(selection)
}
}
})
If you want to find the last item that was selected, you can use an array diff here
watch:{
selection(newValue, oldVal) {
var arrDiff = myArrDiffDependency.added(newValue, oldValue)
this.onUpdate(arrDiff)
}
},
watch: {
selection() {
if (this.items.length > 1) {
this.items.shift();
}
},
},
Isto resolve
Suppose I'm trying to make a simple questionnaire, where the user answers a list of questions.
new Vue(
{
el: "#app",
data:
{
questions:
[
{
id: 1,
name: "What is your favorite color?",
selectedId: 2,
choices:
[
{ id: 1, name: "red" },
{ id: 2, name: "green" },
{ id: 3, name: "blue" },
]
},
...
]
}
});
How do I go about making a question component with two-way binding. That is, if the user swaps their favorite color from green to red, by clicking on the respective input, the selectedId will automatically update. I'm not very clear on how v-model works within a component. Does it only have access to the components data? Also, I don't understand the difference between props/data.
There are lots of ways you can approach this, here's my attempt:
let id = 0;
Vue.component('question', {
template: '#question',
props: ['question'],
data() {
return {
radioGroup: `question-${id++}`,
};
},
methods: {
onChange(choice) {
this.question.selectedId = choice.id;
},
isChoiceSelected(choice) {
return this.question.selectedId === choice.id;
},
},
});
new Vue({
el: '#app',
data: {
questions: [
{
title: 'What is your favorite color?',
selectedId: null,
choices: [
{ id: 1, text: 'Red' },
{ id: 2, text: 'Green' },
{ id: 3, text: 'Blue' },
],
},
{
title: 'What is your favorite food?',
selectedId: null,
choices: [
{ id: 1, text: 'Beans' },
{ id: 2, text: 'Pizza' },
{ id: 3, text: 'Something else' },
],
},
],
},
});
.question {
margin: 20px 0;
}
<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
<question v-for="question of questions" :question="question"></question>
</div>
<template id="question">
<div class="question">
<div>{{ question.title }}</div>
<div v-for="choice of question.choices">
<input type="radio" :name="radioGroup" :checked="isChoiceSelected(choice)" #change="onChange(choice)"> {{ choice.text }}
</div>
<div>selectedId: {{ question.selectedId }}</div>
</div>
</template>