I try to build simple tasks board and have one problem. I build my borad:
<draggable
v-for="(taskBoardCard, index) in filteredTasts"
:key="index"
:options="{ group: `${taskBoardCard}` }"
:class="{ 'roster__field--dark': isDarkModeOn }"
class="roster__field"
#change="log"
>
<task-card
v-for="task in taskBoardCard"
:key="task.id"
:task-item="task"
:class="`task--${task.status}`"
#open-current-modal="openEditingModal"
/>
</draggable>
But i cant see changes in my board:
methods: {
log (evt) {
window.console.log(evt)
}
}
In my filteredTasts i have
tasks: [
{
id: 1,
name: 'Task1',
description: 'description for task 1',
status: 'todo',
complexity: 6,
priority: 'low',
editing: false
}
]
How can i track actions in draggable?
Thank you.
Related
I have quasar tabs that are being rendered in v-for loop.
Problem is that when I provide array as prop from parent, then my tabs stop working to toggle whereas it works with local array.
<div v-for="test in tests">
<q-tabs
v-model="test.status"
align="justify"
>
<q-tab
v-for="(tab, tabIndex) in tabs"
:key="tabIndex"
:name="tab.value"
>
{{ tab.name }}
</q-tab>
</q-tabs>
</div>
<script>
export default {
props: ['tests']
data (){
return {
tabs: [
{
name: 'Required',
value: 'required'
},
{
name: 'Not Required',
value: 'not-required'
}
]
}
}
Tests Data
[
{
id: "test 1"
name: 'TEST 1'
status: 'required'
},
{
id: "test 2"
name: 'TEST 2'
status: 'not-required'
}
]
Expected result
Toggle of tabs must work when component is provided with props data to iterate.
I have a code, when you click on a new task, the first one is crossed out, I can’t understand why.
When you click on a new task, the first one is crossed out, and the one I click on should be
<template>
<h4>Today Tasks</h4>
<div class="tasks">
<div
class="task"
:class="{ completed: task.isCompleted }"
v-for="task in tasks"
:key="task._id"
#click="completedHandler(task._id)"
>
<div
class="round"
:class="{
business: task.type === 'business',
personal: task.type === 'personal',
}"
></div>
<span>{{task.name}}</span>
</div>
</div>
<div class="add-task">
<input type="text" placeholder="Название задачи" v-model="taskName" />
<button #click="addTask">+</button>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return {
taskName: "",
tasks: [{
_id: "wadawdawdwa",
name: "Create to do app in Vue js",
isCompleted: false,
type: "personal",
}
]
}
},
methods:{
completedHandler:function(taskid){
const currentTask=this.tasks.find((t)=> t._id=taskid);
currentTask.isCompleted = !currentTask.isCompleted;
},
addTask: function(){
this.tasks.push({
_id: Math.random().toString(36).substring(2, 7),
name: this.taskName,
isCompleted: false,
type: "personal",
});
},
},
};
</script>
I am trying to create a card builder using Vue draggable. I have a row full of cardElements and these can be dragged to the card builder. The card builder is a rectangle made up of individual "buckets" of lists. Here is what it looks like:
Card builder Layout
Here is the script to generate the elements list:
import draggable from 'vuedraggable'
export default {
name: "clone",
display: "Clone",
order: 2,
components: {
draggable
},
data() {
return {
cardElements: [
{ name: "Logo", id: 1 },
{ name: "Stamp", id: 2 }
],
arrA: []
};
},
methods: {
log: function(evt) {
window.console.log(evt);
}
}
};
You can see that the cardElements are correctly rendered from script and this is how they are rendered in the HTML:
<draggable class="dragArea list-group" :list="cardElements" :group="{ name: 'people', pull: 'clone', put: false }" #change="log">
<div class="list-group-item" v-for="element in cardElements" :key="element.name">
{{ element.name }}
</div>
</draggable>
These are draggable and I can change their order like so:
Changed Order of items
Each "bucket" on the card is declared as an array like so (this is only for the top left space on the card builder, each square is a different number):
data() {
return {
cardElements: [
{ name: "Logo", id: 1 },
{ name: "Stamp", id: 2 }
],
arrA: []
};
}
<draggable class="dragArea list-group" :list="arrA" group="cardItem" #change="log">
<div class="lvl1-1 bucket empty" v-for="element in arrA" :key="element.name">
{{ element.name }}
</div>
</draggable>
But when I drag an element from the cardElements list to the arrA list, it doesn't move and I'm not sure why. I can get it working in the example code supplied here, but not when I change it to my own code.
The issue was that I had the group defined as :group="{ name: 'people', and then was calling it as group="cardItem" so I changed :group="{ name: 'people', to this :group="{ name: 'cardItem', and it worked
I cant pass data to props in VueJS.
Here is my code:
const projects = [{ id: 1, name: 'First', img: "https://randomwordgenerator.com/img/picture-generator/53e0d7414855ac14f1dc8460962e33791c3ad6e04e5074417d2e72d2964cc6_640.jpg" },
{ id: 2, name: 'Second', img: "https://randomwordgenerator.com/img/picture-generator/paper-1100254_640.jpg" },
{ id: 3, name: 'Third', img: "https://randomwordgenerator.com/img/picture-generator/5fe2d4414352b10ff3d8992cc12c30771037dbf85254794075287cd69145_640.jpg" },
{ id: 4, name: 'Forth', img: "https://randomwordgenerator.com/img/picture-generator/5fe1d3414256b10ff3d8992cc12c30771037dbf8525478487c2f79d5924e_640.jpg" }
]
const Project = {
props: ['img', 'name'],
template: `
<div class="container projectbox">
<div class="textandimage"> Name: {{ projects.name }} </div>
</div>
`,
data() {
return {
projects
}
}
}
img:undefined
name:undefined
Please help.
Projects is a list (Array) of Objects. if you want to access an Object in the list, you need to reference its position. for example:
<div class="textandimage"> Name: {{ projects[0].name }} </div>
This will access the first Object in your list, and return the value of the key name
EDIT: for-loop
If you want to loop through the data to the template, do something like this:
<div v-for="(item, index) in projects" class="container projectbox" :key="index">
<div class="textandimage"> Name: {{ item.name }} </div>
</div>
Hope that makes more sense.
I have the following code that cycles a carousel which is fine but I want to be able to display the item title underneath as appose to on top of the image. I figured the way to do this is to create a new data value that is updated each time the carousel changes. I cannot figure out how to do this however.
<v-carousel>
<v-carousel-item
v-for="(item,i) in servicesCarouselItems"
:key="i"
:src="item.src"
>
</v-carousel-item>
</v-carousel>
<v-card-title class="justify-center">{{currentTitle}}</v-card-title>
<script>
export default {
data: () => ({
currentTitle: '',
servicesCarouselItems: [
{
name: "Title1",
src: require('../../1.jpeg'),
},
{
name: "Title2",
src: require('../../2.jpeg'),
},
{
name: "Title3",
src: require('../../3.jpeg'),
}
],
})
}
</script>
Propably best way is to use v-model - index of current item is exposed there...
<v-carousel v-model="currentIndex">
<v-carousel-item
v-for="(item,i) in servicesCarouselItems"
:key="i"
:src="item.src"
>
</v-carousel-item>
</v-carousel>
<v-card-title class="justify-center">{{ currentTitle }}</v-card-title>
<script>
export default {
data: () => ({
currentIndex: 0,
servicesCarouselItems: [
{
name: "Title1",
src: require('../../1.jpeg'),
},
{
name: "Title2",
src: require('../../2.jpeg'),
},
{
name: "Title3",
src: require('../../3.jpeg'),
}
],
}),
computed: {
currentTitle() {
return this.servicesCarouselItems[this.currentIndex].name
}
}
}
</script>
I managed to solve this issue by using the v-on:change / #change Vue event as shown in the example below.
<v-carousel #change="currentTitle = servicesCarouselItems[$event].name">
<v-carousel-item
v-for="(item,i) in servicesCarouselItems"
:key="i"
:src="item.src"
>
</v-carousel-item>
</v-carousel>
Further reading for those interested:
https://renatello.com/get-selected-value-on-change-in-vuejs/#The_advantages_of_using_change_event_instead_of_v-model_binding