I try:
<a v-for='(item, index) in categories' :key='index'>
<div class='slider-categories__slide' :style='{ background: item.background}'>
</div>
</a>
Didn't work. Is it possible? If not, how i can add background for elements? (different background for items)
you can have an object named for example style in each object in the array, in each style object you can have specific style for that object and bind that to the style attribute on the element like :style="item.style".
also if you can't have a dedicated object for the styles in you array's objects you can use the data that you have to construct the appropriate object binding in the v-for, just pay attention to the correct formatting.
check the demo below: (here I used destructuring in v-for but its not necessary)
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
items: [{
id: 1,
style: {
background: 'blue'
}
},
{
id: 2,
style: {
background: "url('https://picsum.photos/id/1025/200')",
backgroundSize: 'contain'
}
},
{
id: 3,
style: {
background: "linear-gradient(#e66465, #9198e5)"
},
},
]
},
})
.items {
height: 100px;
width: 100px;
display: inline-block;
border: 2px solid red;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<div id="app">
<div class="items" v-for="{id, style} in items" :key="id" :style="style"></div>
</div>
Related
currently drag and drop feature is working with vue2, i want to achieve same feature using vue3 composition api.
vue2 code:
<div id="app">
<div id="box-droppable1" #drop="drop" #dragover="allowDrop">
<h3>Draggaable area 1:</h3>
<hr>
<div class="" draggable="true" #dragstart="onDragging" id="123">
<h2>Drag mee</h2>
<p>this is a text</p>
</div>
<img id="img-draggable" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" draggable="true" #dragstart="drag" width="336">
</div>
<div id="box-droppable2" #drop="drop" #dragover="allowDrop">
<h3>Droppable area 2:</h3>
<hr>
</div>
</div>
Here is vuejs code done using vuejs options API.
JS:
new Vue({
el: '#app',
data(){
return {
};
},
methods : {
onDragging(ev){
console.log(ev);
ev.dataTransfer.setData("text", ev.target.id);
//this.$store.commit('module/namespace', status);
},
allowDrop(ev) {
ev.preventDefault();
},
drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
},
drop(ev) {
ev.preventDefault();
let data = ev.dataTransfer.getData("text");
console.log(data);
ev.target.appendChild(document.getElementById(data));
}
},
})
css:
#app{
width: 100%;
display: flex;
#box-droppable1 {
width: 50%;
background-color: coral;
min-height: 300px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#box-droppable2 {
width: 50%;
min-height: 300px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
}
---------------------#---------------------------------------------------------------------------------------#------------------
codepen
As the comments already mention, this is nothing that would be different in the composition API, which is just another way to define a component.
All the methods you have in the options API, you can just have them in the setup method and return them:
setup() {
const onDragging = (ev) => {
console.log(ev);
ev.dataTransfer.setData("text", ev.target.id);
};
const allowDrop = (ev) => {
ev.preventDefault();
};
const drag = (ev) => {
ev.dataTransfer.setData("text", ev.target.id);
};
const drop = (ev) => {
ev.preventDefault();
let data = ev.dataTransfer.getData("text");
console.log(data);
ev.target.appendChild(document.getElementById(data));
}
return {
onDragging,
allowDrop,
drag,
drop,
}
}
I would probably not directly append a child with vanila js but also do it the Vue way, but that's just a side note.
I am displaying data in html using in loop, inside it I got a class
div(v-for="item in items" :key="item.id")
.circle
p {{ item.name }}
in my css I got
.circle::after
content: ''
background: grey
height: 5px
width: 130px
position: absolute
left: 0
top: 16px
z-index: -1
Can I display this after class only if there is more than 1 item in my loop?
As I said in the comments, ::after pseudo element is CSS construct so you cannot control it using Vue.
I see two possible solutions:
Define two classes - one with ::after and one without it and conditionally apply only one of the classes based on the number of items
You can actually do it entirely with CSS using :not(:only-child) pseude-selector. See example below
new Vue({
el: "#app",
data: {
toggle: true,
items: [
{ text: "Learn JavaScript", id: 1 },
{ text: "Learn Vue", id: 2 },
{ text: "Play around in JSFiddle", id: 3 },
{ text: "Build something awesome", id: 4 }
]
},
computed: {
computedItems() {
return this.toggle ? this.items : this.items.slice(0,1)
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.circle:not(:only-child)::after {
content: " ➥";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="toggle = !toggle">
Switch items
</button>
<div>
<div v-for="item in computedItems" :key="item.id" class="circle">
{{ item.text }}
</div>
</div>
</div>
<template>
<div class="container">
<div class="gameboard">
<div class="title">Game Board</div>
<div class="main">
<div
v-for="item in boardFields"
:key="item.number"
:class="{ notclicked: !isclicked, clicked: isclicked }"
#click="toggleClick(item)"
>
{{ item.number }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
boardFields: [],
};
},
methods: {
toggleClick(item) {
item.isclicked = !item.isclicked;
},
},
mounted() {
this.boardFields = [...Array(49)].map((_, i) => ({
number: i + 1,
isclicked: false,
}));
},
};
</script>
<style>
.notclicked {
font-size: 3.5rem;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
margin: 0.3rem;
width: calc(40.4rem / 7);
height: calc(40.4rem / 7);
border-radius: 0.8rem;
}
.clicked {
font-size: 3.5rem;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
margin: 0.3rem;
width: calc(40.4rem / 7);
height: calc(40.4rem / 7);
border-radius: 0.8rem;
}
</style>
I want to change the class of each 'boardFields object' div through a click event by class binding to the 'isclicked' boolean in each object but I get this error message:
[Vue warn]: Property "isclicked" was accessed during render but is not defined on instance.
at
Does it have something to do with the fact that the objects are created in mounted()? Or is it something else?
The issue is in the class-binding:
:class="{ notclicked: !item.isclicked, clicked: item.isclicked }"
the parameters passed in by the a method have no meaning for the effect you want to achieve.i don't know whether you want to change the whole array after clicking or a single one. my example i give is to change the entire array, changeing the current one is almost the same , just adding a pointer to the loop where it traverses
data() {
return {
isclicked: false,
}
},
methods: {
toggleClick(item) {
this.isclicked = !this.isclicked;
},
},
<div
v-for="item in 10"
:class="{ notclicked: !isclicked, clicked: isclicked }"
#click="toggleClick()"
>
{{ item }}
</div>
I have a question about Vue.
I want to add a class to a specific item:
<p v-on:click="display = !display">Rediger joke</p>
Display is False before and it change it to true.
And it works. But my problem is, that this onclick is inside an v-for loop, and i only want to put "display" on one "update-site" and not all of them. Can i do this or do I have to try a different setup?
Thanks a lot
I have this idea that might help you. The idea is you extend post object with for example visible property and when you click event triggered you change this property and add .display class. Please check this jsfiddle
template
<div id="app">
<article v-for="post in filteredPosts" :key="post.id">
{{post.name}}
<button #click="display(post)">show</button>
<div class="post-content" :class="{display: post.visible}">this is the part I want to display onclick</div>
<hr />
</article>
</div>
css
.post-content {
display: none;
}
.post-content.display {
display: block;
}
code
new Vue({
el: '#app',
data() {
return {
posts: []
};
},
created() {
//when you load posts. add visible property.
setTimeout(() => {
//posts from server
var postsFromServer = [{
id: 1,
name: 'Post One'
},
{
id: 2,
name: 'Post Two'
}
];
//add visible proprty.
this.posts = postsFromServer.map(post => {
return {
...post,
visible: false
};
});
}, 1000);
},
computed: {
filteredPosts() {
//do your filters
return this.posts;
}
},
methods: {
display(post) {
this.$set(post, 'visible', !post.visible);
}
}
});
I have an article, and i get the data from Firebase.
<article v-for="post in filteredPosts" :key="post.id">
{{post.name}}
<p v-on:click="display = !display"></p>
<div>this is the part I want to display onclick</div
</article>
updateInputs has display:none, but onclick I want it to be display as block:
.updateInputs.display {
display: block;
position: absolute;
top:0;
left:0;
bottom: 0;
background-color: white;
box-shadow: 4px 4px 10px black;
width: 100%;
height: auto;
overflow: hidden;
overflow-y: scroll;
padding-bottom: 10px;
}
I have an element div with atribute contenteditable="true". This div behaves like an element textarea.
<div v-on:keyup.enter="SendMensage" v-html="msg" contenteditable="true"></div>
my code:
data() {
return {
msg: '',
}
},
methods: {
enviaMensagem() {
console.log(this.msg);
}
}
My problem is that the databind does not work. What is typed in the div does not reflect on the variable. Does anyone know what can it be?
You need to listen to changes of the element, because v-model only works on <textarea> or <input>. You can do this by using an #input listener.
The markup you get like this will be escaped. If you want to unescape it, you can use e.g. this approach. Then, you actually have the markup right next to the pseudo-textarea field. So, why not using a <textarea> from begin with?
new Vue({
el: '#editor',
data: {
msg: ''
},
methods: {
typing: function(el) {
this.msg = el.target.innerHTML;
},
submit: function() {
console.log("Submitting: ", this.msg);
}
}
});
.input {
display: inline-block;
vertical-align: middle;
border: 1px solid black;
width: 200px;
height: 100px;
}
.output {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 100px;
background: #eee;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="editor">
<div class="input" #input="typing" #keyup.enter="submit" contenteditable="true"></div>
<div class="output" v-html="msg"></div>
</div>