eslint-plugin-vue Online Playground
Tools
<template> <input v-model="inputValue" /> <button @click="handleClick" class="add-button">Add ToDo</button> <ul class="todo-list"> <li v-for="(todo, index) in todoItems" :key="todo.id" class="todo-item" :class="{ 'todo-item--done': todo.done }" @click="todo.done = !todo.done" > <span v-if="todo.done">✓</span> {{ todo.text }} </li> </ul> </template> <script setup> import { ref, computed } from "vue" const inputValue = ref("") const todoItems = ref([]) function handleClick() { todoItems.value.push({ id: Math.random().toString(36).slice(-8), done: false, text: inputValue.value, }) inputValue.value = "" } const buttonColor = computed(() => (inputValue ? "black" : "white")); const buttonPointerEvents = computed(() => inputValue.value ? "initial" : "none" ); </script> <style> .add-button { color: v-bind(buttonColor); pointer-events: v-bind("inputValue ? 'initial' : 'none'"); } .todo-list { list-style: none; } .todo-item { background-color: #eef; } .todo-item--done { background-color: #3fb983; color: #fff; } </style>
Now loading...
  1. [6:21]: 'index' is defined but never used. (vue/no-unused-vars)
  2. [30:37]: Must use `.value` to read or write the value wrapped by `ref()`. (vue/no-ref-as-operand)
  3. [31:7]: 'buttonPointerEvents' is assigned a value but never used. (no-unused-vars)