Question

我试图获取所有具有“ 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);
                });
            });
        }
    }

Answer 1

如果要为这些标签设置相同的ref名称，则应将它们放在v-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>

Answer 2

如果以这种方式使用，则会覆盖以前的引用。如果您希望newsanimate引用是一个数组，请像下面的示例中将v-for与ref="newsanimate"一起使用：

<div v-for="i in 3" :class="`test${i}`" ref="newsanimate">{{i}}</div>

这是一个小提琴：http://jsfiddle.net/eywraw8t/342633/

Answer 3

根据Vue.js文档：

在带有v-for的元素/组件上使用时，注册的引用将是一个包含DOM节点或组件实例的数组。

因此，在您的情况下，由于您没有使用v-for定义div，因此所有先前的引用都将被下一个引用覆盖。

有关更多参考，请参见here。

Answer 4

也许无关紧要。但是非常重要的是，您需要设置：key =“”以获得正确的引用。

<template v-for="(item, index) in items">
  <Item :key="index" ... ref>
     <button ref... >

Ref仅获得最后一个元素-VueJS

4 个答案: