Question

我只希望悬浮时仅弹出单个元素，而不是所有元素。

lists: [{
    fruit: "Apple",
    note: "gg",
    deleteNote: false
  },
  {
    fruit: "Pear",
    note: "gg",
    deleteNote: false
  },
  {
    fruit: "Eggs",
    note: "gg",
    deleteNote: false
  }
]

<ul>
  <li v-for="(list,index) in lists" v-bind:key="index" @mouseover="list.deleteNote=true;" @mouseleave="list.deleteNote =false">{{list.fruit}}
    <p v-if="list.deleteNote">{{list.note}}</p>
  </li>
</ul>

Answer 1

delete只有一个标志，所有删除按钮都链接到该标志。

您可以这样做

<ul>
 <li v-for="(list,index) in lists" v-bind:key="index" @mouseover="list.deleteNote=index;" @mouseleave="list.deleteNote = -1">{{list.fruit}}
  <p v-if="list.deleteNote === index">{{list.note}}</p>
 </li>
</ul>

悬停时，将deleteNote设置为当前索引，鼠标悬停时将其设置为无效索引（在这种情况下为-1）。现在，删除按钮已绑定到当前索引。

Answer 2

您的代码实际上并没有错。更改元素的deleteNote来观察它是否在更仔细地工作，按以下方式，它仅显示悬停的元素的注释：

new Vue({
  el: '#app',
  data: {
    lists: [{
        fruit: "Apple",
        note: "aa",
        deleteNote: false
      },
      {
        fruit: "Pear",
        note: "pp",
        deleteNote: false
      },
      {
        fruit: "Eggs",
        note: "gg",
        deleteNote: false
      }
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(list,index) in lists" v-bind:key="index" @mouseover="list.deleteNote=true;" @mouseleave="list.deleteNote =false">{{list.fruit}}
      <p v-if="list.deleteNote">{{list.note}}</p>
    </li>
  </ul>
</div>

Answer 3

我不认为StackOverflow上的codeandbox支持vue.js，因此我在下面的小提琴中对JS进行了一些调整。首先，需要按照Vue list rendering documentation将整个列表包装为变量。

请参阅我的小提琴与您的代码，我认为期望的结果在这里：https://jsfiddle.net/gve4s87L/

悬停时弹出一个特定元素

3 个答案: