[Vuejs]-Handle click events in a list

by

0👍

✅

You don’t say how you’re rendering the todo elements. But if you’re using a v-for loop, one approach could be

<ul>
    <li
        v-for="(todo, index) in todos"
        :key="index"
    >
        {{todo.whatever}}
        <button 
            v-if="index !== visibleTodoIndex"
            class="more"
            @click="visibleTodoIndex = index"
        />
        <div 
            v-else
            class="more-opt"
        >
            <button 
                class="destroy" 
                @click="visibleTodoIndex = -1"
            />
        </div>
    </li>
<ul>

Then just add visibleTodoIndex to the component’s data.

0👍

It looks to me you need to use a global variable accessible from all todos, not to have a local variable inside each todo and updating it everywhere every time. I recommend using vuex store and updating isMoreClick value via mutations.

Leave a comment