How to change html content(Font-Awesome Icon) for individual list objects on mouse hover using Vue.js

Question

My goal is to change a font-awesome icon for list items displayed with Vue on mouse hover. Basically, I want to recreate this functionality with Vue.js.

I know there are plenty of ways to do this with css and js, and have even included how to do it using pure css in the link above, but I'm curious if I can do this using vue alone.

Here's the code generating the list of data displayed:

<div id="file-content" class="hover file-row-container fr-open-dir"
     v-on:click="SetSelected(dirObj.id)"
     v-for="dirObj in displayedFolders">
    <div class="file-row">
        <div class="file-row-icon">
            <i class="fa fa-folder-o" aria-hidden="true"></i>
        </div>
        <span class="file-row-text hover-ul">
            {{dirObj.name}}
        </span>
    </div>
</div>

Answer 1

css is the best option here. Yes you can but I do not recommend . Because it's not optimal for your operation. You can use @mouseover and @mouseleave event for handle this