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.
Related
How to render a div/component in other places on my component without make the duplicate content as separate component in vue? or separate the duplicate content from the targets?
for example this is the div I want to duplicate:
<div>blabla {{somecontent}}</div>
and I want to render in those places (all the code should be in one component):
<section>
<div> __HERE__ </div>
</section>
<section>
<div> __HERE__ </div>
</section>
I think want I expect is something like this:
<div #blabla>blabla {{somecontent}}</div>
<section>
<div> {{blabla}} </div>
</section>
<section>
<div> {{blabla}} </div>
</section>
A good solution is creating a Vue component. I always try to create component. AS question demand I give a solution here.
You can create a computed or a method that will render the component like this
<script>
...,
computed: {
renderBlaBla() {
return `<div #blabla>blabla ${this.somecontent}</div>`
}
},
....
</script>
and in the template section
<section>
<div v-html="renderBlaBla"></div>
</section>
<section>
<div v-html="renderBlaBla"></div>
</section>
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>
So I currently have a template sitting in a ".vue" file like so:
<template>
<div id="dataAttachToMe"></div>
</template>
I don't want this to load, unless a user clicks a button, something like
<button #click="loadTheTemplateAbove">See Data</button>
I've tried using this example:https://v2.vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key. But it says something like "Component template should contain exactly one root element" in the error message.
I need more than a show/hide here I think, something that can initiate the template dynamically.
<template>
<div id="data">
<button #click="loadTemplate">Load the template</button>
<div v-if="buttonClicked">
<div id="dataAttachedToThisDiv"></div>
</div>
</div>
</template>
The error you are getting, means that there is more than one root element inside <template></template> tag.
It is required in Vue.js (and other template based frameworks/libraries) to have only one root element.
This will NOT work:
<template>
<div id="dataAttachToMe"></div>
<button #click="loadTheTemplateAbove">See Data</button>
</template>
This will work:
<template>
<div id="someRootDiv">
<div id="dataAttachToMe">Some data</div>
<button #click="loadTheTemplateAbove">See Data</button>
</div>
</template>
Here is a code example (App.vue) of what you are trying to achieve:
Basic idea: we have to create a variable, that will be changed upon button click. We add v-if directive that depends on that variable and will handle element's visibility.
Welcome to StackOverflow. When you get the error Component template should contain exactly one root element it means that you can only have one root element in your template. You can fix that error by wrapping everything in a blank div like so
<template>
<div>
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
</div>
</template>
Please edit your post and place you <script> tag. Conditional Rendering requires a data field of a boolean that you can place in your if statement on your template
<template>
<div>
<div v-if="show">{{message}}</div>
<div v-if="#show">Not Showing when show is set to false</div>
<button v-on:click="show = true">Show</button>
</div>
</template>
<script>
module.exports {
data: function () {
message: 'Hello Vue!',
show: false
}
}
</script>
Im using bulma css as the framework.
I have made a custom box component with two props. One for the title and one for the image src.
However when i use this component in another component and enter the src, it doesnt run through the file loader and hash the output. It just makes a path with what i have exactly entered.
BaseBox.vue:
<template>
<div class="column">
<div class="box image is-2by1 is-marginless">
<div class="is-pos-absolute is-centered-absolute">
<h1 class="title has-text-white has-text-weight-bold is-size-4-mobile">{{title}}</h1>
<div class="buttons is-centered">
<a class="button button-dark has-text-weight-semibold">MORE</a>
</div>
</div>
<img v-bind:src="imageSrc" alt="">
</div>
</div>
</template>
<script>
export default{
props:{
title: String,
imageSrc: String
}
}
</script>
use in component
<BaseBox title="Our Products" imageSrc="~/assets/image.jpg"></BaseBox>
any help would be much appreciated
My requirement is something like this.
I got the list of images from the back-end.
I want to pass those image names to the carousel to display images.
This is my code.
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
}
}
</script>
But this method doesn't work. How do I pass images to my carousel element?
The problem is that you're setting all carousel slides to active, so they will all display at once. Use :class to conditionally set the active slide...
<div class="carousel-item" v-for="(banner,idx) in banners" :class="{ active: idx==0 }">
<img :src="banner" alt="" class="img-fluid">
</div>
Also, make sure the :src="'./assets/${banner}'" reference is actually working to find the images.
Working demo on Codeply
Note: You don't want to use jQuery $('.carousel').carousel(); to load the Carousel since you're already using the data-ride="carousel" attribute. As stated in the Bootstrap 4 docs...
The data-ride="carousel" attribute is used to mark a carousel as
animating starting at page load. It cannot be used in combination with
(redundant and unnecessary) explicit JavaScript initialization of the
same carousel.
From https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.
Vue hasn't mounted this component yet on page load. So you gotta initialize the slider only after it has mounted.
So you gotta remove data-ride="carousel", and add $('.carousel').carousel() in the mounted hook (assuming that the jquery $ is available as a global variable). Make sense ?
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
},
mounted(){
$('.carousel').carousel();
}
}
</script>