How can I use the #onerror event in b-card of Bootstrap Vue?
I would like to handle the 404 of image so that I can display a default image.
<b-card overlay
:title="name"
:sub-title="description"
:img-src="cardImg"
img-top
style="max-width: 20rem;"
class="mb-2">
</b-card>
I would recommend placing a <b-img-lazy> component inside of a <b-card> with the no-body prop set.
<b-card no-body>
<b-img-lazy class="card-img-top" src="...." #error.native="onError" />
<b-card-body :title="name" :sub-title="description">
Card Text
</b-card-body>
</b-card>
For reference on the above components, see:
https://bootstrap-vue.js.org/docs/components/card#kitchen-sink-example
https://bootstrap-vue.js.org/docs/components/image
Well, this component doesn't seem to provide this particular event handler (at the time of writing), but you could add a ref on the component and register the error handler on mounted hook:
<b-card overlay
:title="name"
:sub-title="description"
:img-src="cardImg"
img-top
style="max-width: 20rem;"
class="mb-2"
ref="card">
</b-card>
new Vue({
el: '#app',
mounted() {
this.$refs.card.querySelector('img').onerror = this.handleImgError;
},
methods: {
handleImgError(evt) {
// event has all the error info you will need
// evt.type = 'error';
}
}
});
Or actually, create a wrapper component providing one.
./components/Card.vue
<template>
<b-card
overlay
:title="name"
:sub-title="description"
:img-src="cardImg"
img-top
style="max-width: 20rem;"
class="mb-2">
</b-card>
</template>
<script>
import bCard from "bootstrap-vue/es/components/card/card";
export default {
name: "Card",
mounted() {
this.$el.querySelector("img").onerror = e => {
this.$emit('onerror', e);
};
},
components: {
bCard
}
};
</script>
index.html
<div id="app">
<card #onerror="handleImgError"></card>
</div>
Related
I have a view in Vue project.
Home.vue
<template>
<TestLayout >
<Card/>
<Card/>
<Card/>
</TestLayout>
</template>
<script>
import TestLayout from "../components/TestLayout.vue"
import Card from "../components/Card.vue"
export default {
name: "Home",
props:{
isList:{
type: Boolean
}
},
components: {
TestLayout,
Card
},
}
</script>
The TestLayout has a section where we can display cards in list or grid view
TestLayout.vue
<template>
<div class="flex border-solid ">
<ListBulletIcon class="h-10 w-10 cursor-pointer shadow border-2 border-indigo-600 rounded-l p-2"
#click="listView = true" />
<TableCellsIcon #click="listView = false"
class="h-10 w-10 cursor-pointer shadow border-2 border-indigo-600 rounded-r p-2" />
</div>
<section
:class="[listView ? 'md:grid-cols-1 grid-cols-1' : 'md:grid-cols-4 grid-cols-2', 'rounded-md grid gap-5 col-span-full']">
<slot :listView="listView"></slot>
</section>
</template>
<script>
import {
ListBulletIcon,TableCellsIcon} from '#heroicons/vue/24/outline'
export default {
data: function () {
return {
listView: false,
}
},
components: {
ListBulletIcon,
TableCellsIcon,
},
}
}
</script>
I want to change the style of Card.vue based on whether user clicks grid view or list view icon.
For example, I want to add this style to Card.vue div tag in its template:
:class="[isList ? 'dark:bg-midnight' : 'dark:bg-red-300', 'min-h-80 w-full bg-gray-50 shadow-xl rounded-md flex flex-col']"
How will I check isList is clicked or not?
How can I achieve this?
You're half way there. After defining a slot prop (<slot :listView="listView"></slot>) you should access it in parent and pass it down to slot components.
<TestLayout>
<template v-slot="{ listView }">
<Card :isList="listView" />
<Card :isList="listView" />
</template>
</TestLayout>
I want to make a modal using bootstrap in vue.js.
I got the warning error
'[Vue warn]: Failed to resolve component: b-button' and here is my code
<template>
<div>
<b-button id="show-btn" #click="showModal">Open Modal</b-button>
<b-button id="toggle-btn" #click="toggleModal">Toggle Modal</b-button>
<b-modal ref="my-modal" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-button class="mt-3" variant="outline-danger" block #click="hideModal">Close Me</b-button>
<b-button class="mt-2" variant="outline-warning" block #click="toggleModal">Toggle Me</b-button>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['my-modal'].show()
},
hideModal() {
this.$refs['my-modal'].hide()
},
toggleModal() {
// We pass the ID of the button that we want to return focus to
// when the modal has hidden
this.$refs['my-modal'].toggle('#toggle-btn')
}
}
}
</script>
i try to solve my problem by looking for the answer from their website bootstrap-vue.org but still it did not work on my project.
apologies if that's too basic, but I'm stuck.
I have created an object in vue with three properties (slug, title and content). I successfully console.logged the object. How can I now use the object in my page in order to render its content?
There is no need for me to loop through the object, at it has only one item in it.
<template>
<div class="relative py-16 overflow-hidden bg-white">
<div class="relative px-4 sm:px-6 lg:px-8">
<div class="mx-auto text-lg max-w-prose">
<h1>
<span
class="block text-base font-semibold tracking-wide text-center text-indigo-600 uppercase"
>Hello</span
>
<span
class="block mt-2 text-3xl font-extrabold leading-8 tracking-tight text-center text-gray-900 sm:text-4xl"
>Here is the name</span
>
</h1>
<p class="mt-8 text-xl leading-8 text-gray-700"></p>
<div
v-bind="this.data.content"
class="text-lg font-medium leading-6 text-gray-900"
></div>
</div>
</div>
</div>
</template>
<script>
const Cosmic = require("cosmicjs");
const api = Cosmic();
const bucket = api.bucket({
slug: "((BUCKETNAME))",
read_key: "((KEY))",
});
const data = bucket
.getObject({
id: "((BUCKET ID))", // Object ID
props: "slug,title,content", // get only what you need
})
.then((data) => {
const about = data.objects;
console.log(data);
});
export default {
name: "data",
data() {
return {
data,
};
},
};
</script>
As other commenters have suggested, it would be useful to read the Vue syntax guide here https://v2.vuejs.org/v2/guide/syntax.html
But to answer your question with the most minimal of code changes, you'd want to move your data request to the lifecycle hook of your vue component.
<template>
<h1>{{ dataObjects.title }}</h1>
<p>{{ dataObjects.slug }}</p>
<p>{{ dataObjects.content }}</p>
</template>
<script>
export default {
name: "data",
data() {
return {
dataObjects: null,
};
},
mounted() {
bucket.getObject({
id: "((BUCKET ID))", // Object ID
props: "slug,title,content", // get only what you need
})
.then((data) => {
// Assign the return value to the dataObjects propery of the vue instance.
this.dataObjects = data;
});
}
};
</script>
In the template section, you can see that I've used curly braces to render the contents of dataObjects (I wasn't sure what structure your data is in).
You can also learn from examples on the Vue Cookbook site
Hi i am newbie in vuejs and buefy. I wanted to do a carousel. However its already printing in the b-carousel-item but in template slot="indicators" it showing broken image. Can anyone help me i want to show the image also in the template slot
this is the code:
https://codesandbox.io/s/wonderful-gagarin-5wc8d?file=/src/App.vue
App.vue
<template>
<b-carousel :indicator-inside="false">
<b-carousel-item v-for="(item, i) in imgurl" :key="i">
<span class="image">
<img :src="getImgUrl(item)" />
</span>
</b-carousel-item>
<template slot="indicators" slot-scope="props">
<span class="al image">
<img :src="getImgUrl(props.item)" :title="props.item" />
</span>
</template>
</b-carousel>
</template>
<script>
export default {
data() {
return {
thumbs: null,
imgurl: [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTE7e4ENLA4IRiYClFOOyc418WmdNTuWAAX_A&usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrMMLeNArJ-NmM-sRGGGr0ya8y0NSF4HZ8Aw&usqp=CAU",
],
};
},
methods: {
getImgUrl(value) {
this.thumbs = value;
return `${value}`;
},
},
};
</script>
Sorry for the help request, but I can't work out how to get a bootstrap-vue modal to display initially on page load without needing to trigger it with a button or link.
Thanks.
Instead of trying to open modal on page load, you can open it on mounted event of Vue.
Elevated from sample code on Bootstrap-Vue website:
<template>
<div>
<b-modal ref="my-modal" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-button class="mt-3" variant="outline-danger" block #click="hideModal">Close Me</b-button>
<b-button class="mt-2" variant="outline-warning" block #click="toggleModal">Toggle Me</b-button>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['my-modal'].show()
},
hideModal() {
this.$refs['my-modal'].hide()
}
},
mounted() {
this.showModal();
}
}
</script>