Vue:根据图像自己的 src 属性显示/隐藏图像

Question

有没有办法在 vue 模板中引用当前元素？我尝试使用this但这似乎不起作用。

基本上，如果源属性的长度大于零，我只想显示 img 标签，该长度会根据它所在的引导下拉列表的选择而变化。

<img id="active_item_icon" v-show="this.src.length > 0 || !!data.icon_url" :src="data.icon_url" alt="Item Icon">

完整代码：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" style="width:100%;text-align:left;" type="button" id="dropdown-item-icon-url" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <!-- This is the image that I want to watch -->
    <img id="active_item_icon" v-show="this.src.length > 0 || !!data.icon_url" :src="data.icon_url" alt="Item Icon">
    <span v-show="!data.icon_url">No Icon Selected</span>
  </button>
  <ul class="dropdown-menu" style="width:100%" aria-labelledby="dropdown-item-icon-url">
    <li v-on:click="updateURL" v-for="item in $store.state.icons" :key="item.id">
      <a href="#"><img :src="$store.getters.icon(item.id)" alt=""></a>
    </li>
  </ul>
  <input type="hidden" name="icon_url" id="item_icon_url" :value="data.icon_url || ''">
</div>

Answer 1

如果您可以访问 img 标签源的data.icon_url并且它是一个字符串，您可以对此执行 v-if，并删除 or。

<img id="active_item_icon" v-show="data.icon_url.length > 0" :src="data.icon_url" alt="Item Icon">

Answer 2

不知道为什么我没有想到这一点，但我只需要将其绑定到一些数据：

export default {
  data: () => ({
    showUrl: ''
  }),
  methods: {
    updateURL(e) {
      this.showUrl = e.currentTarget.querySelector('img').src
    },
  }
}

<img id="active_item_icon" v-show="!!showUrl.length" :src="showUrl" alt="Item Icon">