I'm trying to get a v-for cycle with background images. My intention is to have for columns each containing a different background image. Is there something wrong here? :(
Please note also photos it's an array imported with props. This is a component template.
<template>
<div class="row">
<div
v-for="photo in photos"
:key="photo"
class="col-3"
style="background-image: url({{photo.url}})"
>
Need to see photo here
</div>
</div>
</template>
<script>
export default {
props: ["photos"],
};
</script>
I'd use template literals with the :style shorthand for v-bind:style
<template>
<div class="row">
<div
v-for="(photo, index) in photos"
:key="index"
class="col-3"
:style="`background-image: url(${photo.url})`"
>
Need to see photo here
</div>
</div>
</template>
Refer to Binding Inline Styles
<div
v-for="photo in photos"
:key="photo"
class="col-3"
v-bind:style="{background-image: 'url(' + photo.url + ')'}"
>
Need to see photo here
</div>
Related
I am having a hard time understanding why my v-model isn't working correctly
I have an 'service' object which contains a property 'actions' of type IAction[]
I also declared an object actions which is an array of IAction and am currently trying to bind checkBoxes to the actions array, but it is not working.
I feel like i am missing something obvious here but would need a little help understanding what it is.
Here is the relevant code
<script lang="ts">
let actions = [] as IAction[];
</script>
<template>
<div v-for="action in service.Actions" :key="action.Id" class="row">
<div class="col-md-12 d-flex">
<div>
<span class="pe-3">
{{ action.EnumName }}
</span>
<input v-model="actions" :value="action" type="checkbox" />
</div>
</div>
</div>
</template>
I would appreciate any feedback as I am relatively new to VueJs,
Thank you
I think you might not understand what you are doing in code, so I wrote examples.
Bad Code:
<script lang="ts">
let actions = [] as IAction[];
</script>
<template>
// here you iterate thro array and assign to action variable
<div v-for="action in service.Actions" :key="action.Id" class="row">
<div class="col-md-12 d-flex">
<div>
<span class="pe-3">
{{ action.EnumName }}
</span>
// Here you using actions with "s" on end so you using empty array declered in script
<input v-model="actions" :value="action" type="checkbox" />
</div>
</div>
</div>
</template>
If you are getting some data from service.Actions use them! v-model will override those actions if they are ref() or `reactive().
Example:
<script lang="ts">
let actions = [] as IAction[];
</script>
<template>
<div v-for="item in service.Actions" :key="action.Id" class="row">
<div class="col-md-12 d-flex">
<div>
<span class="pe-3">
{{ item.EnumName }}
</span>
<input v-model="item.is" :value="action" type="checkbox" />
</div>
</div>
</div>
</template>
If service.Actions is only array actions you want to add to array in script actions v-model is not a way you do that!
Probably code you need:
<script lang="ts">
const actions = ref([]) // Use refs everywhere !!! A specially in forms.
function deleteItem() {
// ToDo delete item from actions array
}
</script>
<template>
<div v-for="item in service.Actions" :key="item.Id" class="row">
<div class="col-md-12 d-flex">
<div>
<span class="pe-3">
{{ item.EnumName }}
</span>
<button #click="actions = [...actions, item]">ADD</button>
</div>
</div>
</div>
<div>
<div v-for="{ item, index } in actions" :key="item.id">
<span>{{ item.EnumName }}</span><button #click="deleteItem(index)">X</button>
</div>
</div>
</template>
As Mises pointed out, the v-model has to be a part of the same object as the v-for, so i just put my services and the actions array in an object
let foo = { services: serviceStore.services, actions: [] as IAction[] }
Please I'm still new using VueJs and am working on a new project and I'm having issues adding images and text in Element UI Carousel for Vue, please how do I add images and text in the Carousel?
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
Here is the link to CodeSandbox
https://codesandbox.io/s/staging-sky-o82gq?file=/src/App.vue
You put content in the slides, by repeating the <el-carousel-item> and putting text/images inside it.
You can simply put content in like this:
<el-carousel :interval="4000" type="card" height="300px">
<el-carousel-item>
<div class="item">
<div class="item__content">
Text for slide 1
</div>
<img class="item__image" src="https://picsum.photos/300?random=1" alt="" />
</div>
</el-carousel-item>
<el-carousel-item>
<div class="item">
<div class="item__content">
Another text for slide 2
</div>
<img class="item__image" src="https://picsum.photos/300?random=2" alt="" />
</div>
</el-carousel-item>
<el-carousel-item>
<div class="item">
<div class="item__content">
Yet another for third image
</div>
<img class="item__image" src="https://picsum.photos/300?random=3" alt="" />
</div>
</el-carousel-item>
</el-carousel>
I have created an example where i add different images and some text to the carousel:
https://codesandbox.io/s/charming-hill-osoxh?file=/src/components/Carousel.vue
Does this answer your question?
suppose we have a component like this.
<template>
<div class=" ">
<div class="flex-grow">{{title}}</div>
<div class=" p-5">
<!-- want to show here -->
</div>
</div>
<script>
export default {
props: ['title'],
mounted() {
console.log('Component mounted.')
}
}
</script>
i try this
<comp :title="'here'">
<h1> this is </h1>
</comp>
i want to show html b.w vue component tag, like we do in react.
how we can achieve this
If I understand the question, you're looking to create a component that can accept child elements. In order to do this, use <slot></slot> in your template where you'd like child elements to be inserted. Child elements can be other components or HTML.
See the reference for more thorough details.
In your example:
<template>
<div class=" ">
<div class="flex-grow">{{title}}</div>
<div class=" p-5">
<slot></slot>
</div>
</div>
</template>
I have a html structure like this:
<template>
<div>
<div class="container">
<somecontent>
<someothercontent>
</div>
</div>
</template>
However, depending on the layout, I want to remove the container div so the structure looks like this:
<template>
<div>
<somecontent>
<someothercontent>
</div>
</template>
Note that the div is completely added or removed, not just the class name. v-if doesn't work here because it would also show or hide the content that is enclosed by the div. What's the simplest solution for that?
You can use
v-if ... v-else
<template>
<div v-if="condition">
<div class="container">
<somecontent>
<someothercontent>
</div>
</div>
<div v-else>
<somecontent>
<someothercontent>
</div>
</template>
I have a vue component Jumbotron.vue:
<template lang="html">
<div class="jumbotron" style="border-radius:0px; color:#fff;">
<div class="container">
</div>
</div>
</template>
And other page component Main.vue:
<template>
<div class="root">
<navbar></navbar>
<jumbotron>
<h1 class="display-4">I want to add here, to the jumbotron's div container some h1 and paragraph</h1>
<p class="lead ">Like this paragraph</p>
</jumbotron>
<words></words>
</div>
</template>
But i cant add content to the jumbotron, because its wrong. I dont want to add content(p and h1) inside of the Jumbotron.vue, because i want to use Jumbotron.vue more than 1 time with different content inside it. Is this possible?
This is done with slots.
<template lang="html">
<div class="jumbotron" style="border-radius:0px; color:#fff;">
<div class="container">
<slot></slot>
</div>
</div>
</template>
Everything you put inside the jumbotron component in the parent will be rendered in the slot.