Question

我正在尝试在Vue.js中获取DOM元素数组。如果我具有以下HTML结构：

from django.core import signing 

unsigned_value = signing.loads(signed_value)

我可以使用<select onchange="toggleDisability(this);" class="mySelect" id="mySelect1"> </select> <select onchange="toggleDisability(this);" class="mySelect" id="mySelect2"> </select>类的所有元素来使用普通的JS，例如：

mySelect

现在，我尝试使用Vue var arraySelects = document.getElementsByClassName('mySelect');来获得相同的结果，但是我总是得到最后一个元素。看起来像：

$refs

和

<select id="selection-x" ref="Axis"  @change="log($event)"></select>
<select id="selection-y" ref="Axis"  @change="log($event)"></select>

当然也有选项，因此log(selectElement){ var arraySelects = this.$refs['Axis']; }事件被发出，但是它并没有达到我想要的目的。我想获得具有相同@change元素的数组，就像上面的示例中的普通JS一样，在这里您得到ref元素的数组，它们的select属性等于到class。

P.S。我知道mySelect应该是唯一的，但是如何将其用于这个特定用例？

Answer 1

不。 ref和$refs无法使用。如果您希望进行DOM操作，请使用vue-directive或直接从组件的根元素访问DOM，例如：

Vue.extend({
    mounted() {
        // Do what you want with your children.
        const children = this.$el.querySelectorAll('.mySelect');
    }
})

Answer 2

对我来说，最好的方法是在父元素上设置一个ref（感谢原始评论中的joaner），但随后我还需要在“ updated”钩子中运行代码，以便在尝试之前加载我的数据访问dom（我要引用子级的同一元素上也有一个v-if）：

模板：

<ul v-if="dataLoaded" ref="eventlist">
    <li class="eventItem"></li>
    <li class="eventItem"></li>
    <li class="eventItem"></li>
</ul>

javascript：

updated() {
  let eventItems = this.$refs.eventlist.children
  console.log(eventItems)
}

在vue js中获取DOM元素数组

2 个答案: