Question

我正在使用Vue-google-maps包在我的网站上绘制带有位置的google地图。

要显示带有标记的位置，我需要这样做：

<GmapMarker v-for="hotel in hotels" :key="hotel.id"
  :position="hotel._geoloc"
  :clickable="true"
  :draggable="false"
  @click="center=hotel._geoloc"
  @mouseover="show = true"
  @mouseleave="show = false" 
>
   <gmap-info-window v-if="show">
       <hotel-card :hotel="hotel" :session="session"/>
  </gmap-info-window>
</GmapMarker>

但是由于某种原因（我是vue的新手），它显示了每个信息窗口，并忽略了v-if语句。我该如何解决这个问题？我应该以什么方式渲染它？感谢您的帮助！

Answer 1

就是这样

hotels = []
axios.get("hotels").then( (data) => {
  hotels = data
})

只是忽略了axios.get只是数据来自后端的示例。这样一来，您就可以看到酒店是来自请求的请求，还是来自后端的，因此，首先要显示属性是要知道我应该显示或隐藏哪个酒店的条件。

hotels = []
axios.get("hotels").then( (data) => {
  if (data.slot === 0 )
    data.show = true
  else data.show = false

  hotels = data
})

就是这样。我只是检查插槽是否等于零，所以我不会显示该酒店。仅举例来说。像这样的东西

vue.js中的v-for内部的v-if

1 个答案: