I've recently put together my very first Vue web application. As I was building it, I ran into an issue with my delete buttons not displaying correctly. No matter what styling adjustments I made, the problem persisted. Any suggestions on how to fix this?
Check out the Github Repo: https://github.com/Ocheezyy/VueTodo
View the live site here:
Here's a snippet of the Vue code in question:
<template>
<div class="todo-item" v-bind:class="{'is-complete':todo.completed}">
<input class="check" type="checkbox" v-on:change="markComplete">
<p>{{todo.title}}</p>
<button @click="$emit('del-todo', todo.id)" class="del">x</button>
</div>
</template>
<script>
export default {
name: "TodoItem",
props: ["todo"],
methods: {
markComplete() {
this.todo.completed = !this.todo.completed;
}
}
}
</script>
<style scoped>
.todo-item {
background: #f4f4f4;
padding: 10px;
border-bottom: 1px #ccc dotted;
}
.todo-item p{
flex-grow:1;
}
.is-complete {
text-decoration: line-through;
}
.del {
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 50%;
cursor: pointer;
float: right;
}
</style>