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

如果您可以访问data.icon_urlimg 标签源并且它是一个字符串，则可以对其执行 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">