时间戳

首页 > 解决方案 > Ref 只获取最后一个元素 - VueJS

javascript - Ref 只获取最后一个元素 - VueJS

问题描述

我正在尝试获取其中具有“ref”属性但失败的所有元素。它只获取具有 ref 属性的最后一个元素，在本例中是具有“lastako”类的 div。有没有办法将它们全部作为元素数组？谢谢您的帮助。

这是我的代码

<template>
    <section id="news">
        <div id="newscontainer">
            <div class="latestevent pt-4">
                <h1 class="latestnews">LATEST NEWS AND EVENTS</h1>
                <span class="float-right readall">Read all news</span>
            </div>
            <div>
                <div class="ako animated" ref="newsanimate" :style="'background-image: url('+getimgurl('bell.jpg')+')'">
                    <div class="akodesc">
                        <p><a href="#">BELL Blue Day</a></p>
                    </div>
                </div>
            </div>
            <div>
                <div class="ako animated" ref="newsanimate" :style="'background-image: url('+getimgurl('family.jpg')+')'">
                    <div class="akodesc">
                        <p><a href="#">Family Day</a></p>
                    </div>
                </div>
            </div>
            <div>
                <div class="ako animated lastako" ref="newsanimate" :style="'background-image: url('+getimgurl('flores.jpg')+')'">
                    <div class="akodesc">
                        <p><a href="#">Q Flores de Mayo</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

在我的脚本标签上

export default {
        methods: {
            getimgurl(url){
                return require('../../assets/images/frontpage/'+url);
            }
        }, mounted(){
            let vm = this;
            this.$nextTick(function (){
                bus.$on('newsanimation',function (){
                    console.log(vm.$refs.newsanimate);
                });
            });
        }
    }

标签： javascriptvue.js

解决方案

如果要将这些标签设置为相同的ref名称，则应将它们放入 av-for中，以使 Vue 以数组的形式存储它们。

另外，如果你想在那个数组中区分它们。您可以使用:ref=""而不是ref=""例如<div :ref="'newsanimate'+i" v-for="i in [1, 2, 3]" :key="i"></div>

所以结果，如果你真的想得到你想要的。只需添加v-for="i in [0]" :key="i"到父级<div>。例如

<template>
    <section id="news">
        <div id="newscontainer" v-for="i in [0]" :key="i">
            <div class="latestevent pt-4">
                <h1 class="latestnews">LATEST NEWS AND EVENTS</h1>
                <span class="float-right readall">Read all news</span>
            </div>
            <div>
                <div class="ako animated" ref="newsanimate" :style="'background-image: url('+getimgurl('bell.jpg')+')'">
                    <div class="akodesc">
                        <p><a href="#">BELL Blue Day</a></p>
                    </div>
                </div>
            </div>
            <div>
                <div class="ako animated" ref="newsanimate" :style="'background-image: url('+getimgurl('family.jpg')+')'">
                    <div class="akodesc">
                        <p><a href="#">Family Day</a></p>
                    </div>
                </div>
            </div>
            <div>
                <div class="ako animated lastako" ref="newsanimate" :style="'background-image: url('+getimgurl('flores.jpg')+')'">
                    <div class="akodesc">
                        <p><a href="#">Q Flores de Mayo</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

推荐阅读