With a loop generating multiple rows, each containing its own 'input' with description and action buttons, including an edit button that toggles the 'disabled' attribute. I'm struggling to figure out how to achieve this. I believe I need to use $emit.
<template>
<section id="tasks-list">
<ul>
<task
v-for="(item, index) in filteredTasksList"
v-bind:key="item.id"
v-bind:index="index"
v-bind:item="item"
v-bind:tasks="tasks"
/>
</ul>
</section>
</template>
and task component:
<template>
<li :class="{checked: item.status}" class="task">
<div class="task-description">
<span>{{item.description}}</span>
<input type="text" v-model="item.description" :disabled="true">
</div>
<div class="task-actions">
<button class="btn-edit" v-on:click="disableItem()">{{translation.edit}}</button>
</div>
</li>
</template>
<script>
export default {
name: 'task',
props: {
item: { required: true },
index: { reuqired: true },
tasks: { required: true },
search: { require: true }
},
methods: {
disableItem(event){
//part responsible for changing disabled attr
}
}
}
</script>