I am using Bootstrap-Vue Accordions in my project, and I want to dynamically render a loop of accordions.
The problem is that it has an attribute v-b-toggle.accordionName, which has no value (or this is what I think).
I need to find a way to bind this attribute's 'name' dynamically.
<b-card no-body v-for="seminar in seminars" :key="seminar.name">
<b-card-header role="tab">
<b-button block v-b-toggle.( ?? )>{{seminar.title}}</b-button>
</b-card-header>
<b-collapse :id="seminar.name" role="tabpanel">
<b-card-body>
Hey there!
</b-card-body>
</b-collapse>
</b-card>
I tried to use v-b-toggle.seminar.name, but clearly failed.
Also tried to use v-bind="toggle", and have a data of toggle={'v-b-toggle.seminarOne': true}, but also failed.
Finally, I know it can be done using custom directives, but I am looking for another local way, if possible.
Thanks.
the v-b-toggle attribute is already dynamic. you can simply use it like this:
new Vue({
el: '#app',
data:{
seminars:[
{
title:'seminar1',
name:'seminar1',
},
{
title:'seminar2',
name:'seminar2',
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/bootstrap-vue#2.0.0-rc.14/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap#next/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/bootstrap-vue#2.0.0-rc.14/dist/bootstrap-vue.js"></script>
<div id="app">
<b-card no-body v-for="seminar in seminars" :key="seminar.name">
<b-card-header role="tab">
<b-button block v-b-toggle="seminar.name">{{seminar.title}}</b-button>
</b-card-header>
<b-collapse :id="seminar.name" role="tabpanel">
<b-card-body>
Hey there! i am {{seminar.name}}
</b-card-body>
</b-collapse>
</b-card>
</div>
https://jsfiddle.net/aep6hqd1/3/
Related
I have an info-card.vue component that is used twice in a landing page, but I want different data displayed in each of them. Here is the info-card.vue component:
<template>
<div class="card-container glass-effect">
<div class="illustration-container">
<img src="{{ image }}" alt="Businesses" class="illustration">
</div>
<div class="title-container">{{ title }}</div>
<div class="paragraph-container">{{ content }}</div>
</div>
</template>
<script>
export default {
props: ['image','title', 'content']
}
</script>
And here is the landing-info.vue page that the info-card component is used in:
<div class="business-side">
<info-card image="/images/image1.png" title="BUSINESSES" content="This is some content"></info-card>
</div>
<div class="customer-side">
<info-card image="/images/image2.png" title="CUSTOMERS" content="This is some content"></info-card>
</div>
But this didn't work, I'm new to vue so any ideas?
You can't use mustache {{ }} in vue attributes. Instead use v-bind:attr="" or :attr="" where attr is the dynamic attribute you want to bind.
So, your image component should be:
<img v-bind:src="image" alt="Businesses" class="illustration" />
or
<img :src="image" alt="Businesses" class="illustration">
The colon is a shorthand for v-bind.
Read more on v-bind here.
I am new to vuejs and vuetify.
I was following youtube course on vuetify and he set the v-chip color in the following manner.
<v-flex xs2 sm4 md2>
<div class="right">
<v-chip
small
:class="`${project.status} white--text my-2 caption`"
>{{ project.status }}</v-chip>
</div>
</v-flex>
and style is;
.v-chip.complete {
background: #3cd1c2;
}
.v-chip.ongoing {
background: #ffaa2c;
}
.v-chip.overdue {
background: #f83e70;
}
I can see the project status text is correctly set. For some reason the color is not getting set in v-chip.
When I inspect the object I found it has following style set
v-chip v-chip--no-color theme--light v-size--small ongoing white--text my-2 caption
For some reason no-color getting set.
Can someone provide some advice on this?
You can use the :class binding directly with the data prop in vue; it can also be used in conjunction with the regular class attribute.
var app = new Vue({
el: '#app',
data: {
projects: [{
status: 'ongoing'
}, {
status: 'complete'
}, {
status: 'overdue'
}]
}
})
#chips-container .v-chip.complete {
background: #3cd1c2;
}
#chips-container .v-chip.ongoing {
background: #ffaa2c;
}
#chips-container .v-chip.overdue {
background: #f83e70;
}
<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#5.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://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-flex xs2 sm4 md2>
<div class="right" id="chips-container">
<v-chip v-for="project in projects" small :class="project.status" class="white--text my-2 caption">{{ project.status }}</v-chip>
</div>
</v-flex>
</div>
EDIT: Updated snipped to use vuetify
Simply use the tenary operator like this
<v-chip
label
outlined
pill
:color="project.status==='complete'?'green':project.status==='ongoing'?'blue':'orange'"
>
{{project.status}}</v-chip>
You can give your v-chip an id.
<v-chip id="chip" small :class="`${project.status} white--text caption my-2`">{{project.status}}</v-chip>
<style>
#chip.v-chip.complete {background: #00cc00;}
#chip.v-chip.ongoing{background: #0099ff;}
#chip.v-chip.overdue {background: #ff0000;}
</style>
You can user "active-class", api documentation
<v-flex xs2 sm4 md2>
<div class="right">
<v-chip small active-class="white--text my-2 caption">{{project.status}}</v-chip>
</div>
</v-flex>
Below code only works when "'test'" is inside a double and single quote like this: v-b-modal="'test'"
Sample working code:
<div id="app">
<div>
<b-link v-b-modal="'test'">Click to Test Modal</b-link>
</div>
<b-modal id="test" title="Bootstrap Vue Modal 2">
<p class="my-4">Testing Bootstrap Vue Modal Without</p>
</b-modal>
</div>
But, what if I want to use a value of a data property, like below example. If I use :v-b-modal="'name'", it uses "name" instead of "testModal".
<div id="app">
<div>
<b-link :v-b-modal="name">Click to Test Modal</b-link>
</div>
<b-modal :id="name" title="Bootstrap Vue Modal">
<p class="my-4">Testing Bootstrap Vue Modal</p>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'testModal'
}
})
</script>
Any help is appreciated on how to use a value of a data property inside v-b-modal.
You just have to remove the two dots v-b-modal="name" and it is going to work.
You can see on this codepen.
I have a component like this:
<test></test>
I declare this as follows:
Vue.component('test', {
data: {
showModal: true
},
methods: {
displayComponentModalDialog: function() {
this.showModal = true;
}
},
template: `<button #click='displayComponentModalDialog'>test</button>`
});
The <test></test> component is then placed somewhere inside the <div id="#app"> wrapper.
var app = new Vue({
router,
el: '#app',
// etc.
})
Now, I want to display another component inside the test component. So in this case I want a dialog to appear after I click the button in test component. I am not able to achieve this.
What I did is adding a new component:
Vue.component('dialog', {
template: '#dialog-template'
});
And then the following code, although I do not know for sure where to put it.
<!-- template for the modal component -->
<script type="text/x-template" id="dialog-template">
<transition name="dialog">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="btn btn-primary" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<!-- use the modal component, pass in the prop -->
<dialog v-if="showModal" #close="showModal = false">
<h3 slot="header">header</h3>
<p slot="body">
test
</p>
</dialog>
I tried putting this code inside the <test></test> but doesn't work. If I put it inside the template attribute in the component structure, it complains about only one root element.
So it is clear I miss some basic conception how this actually works in VueJS. Someone can help me clarify? Thanks.
As far as I can see your component indeed doesn't have a root tag. Templates have to have a root tag.
This is NOT a valid Vue template:
<div>
<h1>Stuff</h1>
</div>
<h2>Other stuff</h2>
This IS a valid Vue template:
<div>
<div>
<h1>Stuff</h1>
</div>
<h2>Other stuff</h2>
</div>
Note that in the second version we have a single root element for the template, a <div>, whereas in the first one we do not.
You have both a <script></script> and a <dialog></dialog> in your component template.
if you want to add another component in your test component . you can use slot on it.
You can refer to this documentation: https://v2.vuejs.org/v2/guide/components-slots.html
Example:
//component 1
<template>
<div id="modal">
// do something for your modal here.
<slot></slot> // reserve area for your another html or component.
</div>
</template>
// component 2
<template>
<your-modal-component>
<another-component>
</your-modal-component>
</template>
I'm having trouble syncing my properties in vue.js, I have an 'active' property that I want to set to the value of each instance 'plan', but at the same time I would like to sync the property with the parent, with no luck. What am I doing wrong ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Vue</title>
<link rel="stylesheet prefetch" href="http://bootswatch.com/paper/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
</head>
<body>
<div class="container">
<div id="app">
<pre>
#{{ $data | json}}
</pre>
<div v-for="plan in plans">
<plan :active.sync="active" :plan.sync="plan"></plan>
</div>
</div>
</div>
<template id="plan_template">
<div>
<span >#{{ plan.name }}</span>
<span >#{{ plan.price }}/month</span>
<button #click="setActivePlan" class="btn btn-primary btn-xs">UPGRADE</button>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{
plans:[
{name:'Executive',price:100},
{name:'Professional',price:50},
{name:'Personal',price:30},
{name:'Free',price:0}
],
active:{},
},
components:{
plan:{
template:'#plan_template',
props:['plan', 'active'],
methods:{
setActivePlan:function(){
this.active=this.plan;
}
}
}
}
});
</script>
</body>
</html>
Note: This answer applies to V2 of Vue JS, < 2.3.0.
If you are using up V2.3.0+ then you can use .sync and .once modifiers: documentation here
You are using version 2 of Vue. The .sync and .once modifiers have been removed. From the docs:
Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding.
I have modified your code to use events here:
new Vue({
el:'#app',
data:{
plans:[
{name:'Executive',price:100},
{name:'Professional',price:50},
{name:'Personal',price:30},
{name:'Free',price:0}
],
active:{},
},
methods: {
setActivePlan: function(plan) {
this.active = plan;
}
},
components:{
plan:{
template:'#plan_template',
props:['plan', 'active'],
methods:{
setActivePlan:function(){
// emit an event to the parent indicating that this is the active plan
this.$emit('activate-plan');
}
}
}
}
});
<link rel="stylesheet prefetch" href="http://bootswatch.com/paper/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div class="container">
<div id="app">
<div v-for="plan in plans">
<plan :plan="plan"
:active="active"
#activate-plan="setActivePlan(plan)"
>
</plan>
</div>
<pre>
{{ JSON.stringify($data, null, 2) }}
</pre>
</div>
</div>
<template id="plan_template">
<div>
<span >{{ plan.name }}</span>
<span >{{ plan.price }}/month</span>
<button #click="setActivePlan" class="btn btn-primary btn-xs">UPGRADE</button>
</div>
</template>