一个动态生成的v-for数组列表。

<div v-for:"value in items">
<span id="title" name="title">{{value.title}}</span>
...
    <div>
        <a  href="javascript:;" :id="value.id" @click="fn($event)">删除</a>
    </div>
</div>

我最初没有给span标签设置动态id,数据的id名都一样。

在想获取span内的数据时,不想因为这点小需求引入jquery,也不想写太多js让页面复杂。

就用document.getElementsByName('title')[tap_id-1].innerText获取了数据。(其实这样是不对的,span没有name属性)

刚开始没有问题。但后来做到删除模块时。删除了这一项的dom。所有“同名title的name属性”的数量也应该减一。

难道我还得设置个全局变量记录删除的次数和删除的位置?太不现实。

于是我灵光一闪。

用v-bind:id="'title_'+value.id"绑定了id。

就可以轻松的用document.getElementById获取数据了。

========

vue渲染数据真是轻松啊,继续学习~

Logo

前往低代码交流专区

更多推荐