Question

我有vue事件附加到循环的元素。

我正在挑战尝试对某个项目显示CRUD操作，相反，所有循环项目都显示其各自的CRUD

如何使元素独一无二？这个的任何vue事件修饰符？

以下是我的代码

<a href="#" class="waves-effect waves-light" v-on:mouseenter="showIcons"><i class="material-icons">list</i></a>
            <div v-if="showButtons">
                <ul>
                    <li>Edit</li>
                    <li>Delete</li>
                    <li>Stop</li>
                </ul>
            </div>

下面的showIcons方法

showIcons: function () {
            this.showButtons = true
        }

Answer 1

因为您将std::time_t属性绑定到所有循环项目，当您将鼠标悬停在某个项目上时，showButtons将切换为true，并且所有绑定到showButtons的项目都会显示。

因此，您需要使用唯一标识符来决定是否应显示项目的按钮。

您可能正在使用showButtons进行循环，因此您可以使用索引。

<强>模板

v-for

<强>脚本

<div v-for="(item , index)">
            <a href="#" class="waves-effect waves-light" v-on:mouseenter="showIcons(index)"><i class="material-icons">list</i></a>
                <div v-if="currentlyShowing === index">
                    <ul>
                        <li>Edit</li>
                        <li>Delete</li>
                        <li>Stop</li>
                    </ul>
                </div> 
</div>

如何使事件仅对Vue中的一个元素成立？

1 个答案: