Here's how the structure of my apps looks:
App
Column Component
Task Component
Task Component
Task Component
Column Component
Task Component
Task Component
Column Component
Column Component
https://i.sstatic.net/gHBly.png
Each column contains a <draggable>
component that surrounds the tasks.
At the App level, there is a data object with different columns and each column has its own set of tasks.
data: function() {
return {
columns: {
new: [
{
ID: 1,
title: 'The thing',
description: 'Prepare a proposal for facade'
},
{
ID: 2,
title: 'The thing 2',
description: 'Prepare a proposal for facade'
},
{
ID: 3,
title: 'The thing 3',
description: 'Prepare a proposal for facade'
}
],
inProgress: [
{
ID: 4,
title: 'The thing 4',
description: 'Prepare a proposal for facade Store Opening Process (DEMO)'
},
{
ID: 5,
title: 'The thing 5',
description: 'Prepare a proposal for facade Store Opening Process (DEMO)'
}
],
done: [],
onHold: []
}
}
}
I iterate over the columns and bind the object to the component:
<kool-column
v-for="column"
v-bind="colum"
></kool-column>
The Kool Column component:
<script id="kool-column-template" type="text/x-template">
<div>
<div>
{{ column.name }} ({{ column.cards.length }})
</div>
<div>
<draggable v-model="cards" group="columnkool">
<div v-for="card in cards" :key="card.ID">
<kool-card v-bind="card"></kool-card>
</div>
</draggable>
</div>
</div>
</script>
<script>
$(document).ready(function() {
Vue.component('koolColumn', {
template: '#kool-column-template',
props: {
ID: {
type: Number,
required: true
},
name: {
type: String,
required: true
},
cards: {
type: Array,
default: function() { return []; }
}
}
});
});
</script>
While dragging and dropping the cards, an error/warning associated with Vue is triggered:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "cards"
One possible solution I considered involves...
- Option #1...
- Option #2...
- Option #3...
Should I stick with option #2? Or is there a better way to handle the double data binding issue when not fully controlling the list updates?