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&nbsp;id="active_item_icon"&nbsp;v-show="data.icon_url.length&nbsp;>&nbsp;0"&nbsp;:src="data.icon_url"&nbsp;alt="Item&nbsp;Icon">

Answer 2

不知道为什么我没有想到这一点，但我只需要将它绑定到一些数据：export default {&nbsp; data: () => ({&nbsp; &nbsp; showUrl: ''&nbsp; }),&nbsp; methods: {&nbsp; &nbsp; updateURL(e) {&nbsp; &nbsp; &nbsp; this.showUrl = e.currentTarget.querySelector('img').src&nbsp; &nbsp; },&nbsp; }}<img id="active_item_icon" v-show="!!showUrl.length" :src="showUrl" alt="Item Icon">