演示:
图中, 选中这行数据后, 怎么获取到当前的数据?
代码:
<tr v-for="item in gridData"><td><input type="radio" v-model="checkout" @change="getDateFn" :data-type="item.articleType" :data-channelName="item.channelName" :data-channelId="item.channelId" :data-code="item.oneline_news_code" :value="item.id || item.articleId"/> </td>
回答:
代码中可以看到, tr中已经使用v-for对gridData数据进行了循环遍历,
下面的radio中,
我们使用:data-channelName='item.channelName', 自己定义了一个data-channelName字段,
通过这个字段获取和存储当前item中的channelName字段,
然后在getDateFn方法中,
我们使用$event.target.getAttribute('data-channelName');
将上面:data-channeName存储的数据赋值给 this.channelName.
getDateFn($event) {window.myArticle_type = $event.target.getAttribute('data-type');if($event.target.getAttribute('data-code')){window.myOneline_news_code = $event.target.getAttribute('data-code');}console.log($event.target.getAttribute('data-code'))// 存储 item.channelNamethis.channelName = $event.target.getAttribute('data-channelName');// 存储 item.channelIdthis.channelId = $event.target.getAttribute('data-channelId');