Question

 <tr v-for="(i, index) in streams">
                            <td class="text-center">{{index + 1}}</td>
                            <td class="text-center">{{i.title}}</td>
                            <td class="text-center"><label class="label" v-bind:class="{ 'label-danger' : i.stateIndex === 0, 'label-warning' : i.stateIndex === 1, 'label-success' : i.stateIndex === 2 }">{{i.state}}</label></td>
                            <td class="text-center link"><a v-bind:href="i.link" target="_blank"><i v-bind:class="i.streamingPlatformClass"></i></a></td>
                            <td class="text-center">{{i.userId}}</td>
                            <td class="text-center">{{i.streamingPlatformID}}</td>
                            <td class="text-center"><button v-on:click="removeStream(i.id)" class="btn btn-primary manageStreamButton">Remove</button><button v-on:click="stopStream(i.id)" v-if="i.stateIndex != 2" class="btn btn-primary manageStreamButton">Stop</button></td>
                        </tr>

在带有“链接”类的TD中，我试图有条件地设置href属性。流中的“链接”属性是YouTube链接或带有FB视频源的标签。这个想法是当link属性具有youtube链接时将其设置为可点击的链接，而当link属性具有标记以使其不可单击时禁用href属性。到目前为止，我已经设法有条件地更改href属性，但是它仍然可以单击并带有链接。我知道可以通过onclick return false来完成，但是我正在寻找另一种方法。或者，如果可以有条件地删除标签，那也是一个很好的解决方案。

Answer 1

您可以使用v-if条件删除标签。这确实意味着复制您的图标代码；

<td class="text-center link">
    <a v-if="showLink" v-bind:href="i.link" target="_blank"><i v-bind:class="i.streamingPlatformClass"></i></a>
    <i v-if="!showLink"  v-bind:class="i.streamingPlatformClass"></i>
</td>

Answer 2

有几种方法可以做到这一点。我认为最好的方法是在<a>和另一个标签（例如<span>）之间切换。

<a v-if="shouldLink" v-bind:href="i.link">Link</a>
<span v-else>Link</span>

其他方式可能包括将href设置为javascript:void()之类以禁用链接，或者使用pointer-events: none添加CSS类以防止单击链接。

使用vueJS

2 个答案: