There are three ul, on my page. I switch the contents of the ul when I click, but when I switch, I will see the content of the previous ul flash. How to solve the problem of flashing?

there are three ul, on my page. I switch the contents of the ul when I click, but when I switch, I will see the content of the last ul flash. How to solve the problem of flashing?
my code is like this

          <ul>
            <li v-for="(item,index) in shebeide">
                <span class="span_three" :title="item.deviceName">{{item.deviceName}}</span>
                <button @click="tianjianshei(item,index)" class="tianjian_lei"></button>
            </li>
            </ul>
            
The effect of the

page is like this

clipboard.png

clipboard.png

when I click to add a device, the text in my last ul will flash and become current. It feels like it should be reused, but I don"t know how to solve this problem

Mar.01,2021

ide/list.html-sharpkey" rel=" nofollow noreferrer "> vue list rendering in-place reuse

this is probably the problem.


to put it simply, when you open a page, you have already rendered a layer of data. When you leave the pop-up page, you do not empty the data, and the data still exists. Of course, you can also add a loading, to cover the data loading before the new data is re-rendered, adding a transition. Of course, the suggestion on the first floor should also be adopted. It is best to add key

.
Menu