Как нажать с помощью селектора запросов

Я не думаю, что вы можете выбрать родителя только в css.

Но поскольку у вас уже есть класс .active, не было бы легче перенести этот класс на li (вместо a)? Таким образом, вы можете получить доступ только к li и a только через css.

-2
задан B L Praveen 28 March 2019 в 05:01
поделиться

5 ответов

Сначала добавьте refs к вашему HTML (в теге a) как

<li class="nav-item"  v-for="(checkoutplan, index) in checkoutplans" :key="checkoutplan.id">
     <a  :id="'nav' + index" :ref="'nav' + index" class="nav-link" :class="{ 'active show' : index === 0 }" href="#settings" data-toggle="tab" @click="editModal(checkoutplan)">Checkout Plan {{index +1}}</a>
</li>

Теперь в vuejs

$(this.$refs.nav0).click(function(){
    //nav0 is beacuse you want first element & first element index is 0
});
0
ответ дан Rejoanul Alam 28 March 2019 в 05:01
поделиться

как ваш комментарий, я попытался, как показано ниже, в смонтированном методе (не создан). Осторожно nextTick требуется, когда элемент vue изменяется данными

new Vue({
 el: "#app",
 data: {
  checkoutplans : []
 },
 methods: {
   editModal : function(param) {
     console.log(param);
   }
 },
 mounted: function() {
   this.checkoutplans = [{id:1},{id:2}];
   this.$nextTick(() => {
   this.$el.querySelector("li.nav-item:first-child a").click();
   });
 }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li class="nav-item"  v-for="(checkoutplan, index) in checkoutplans" :key="checkoutplan.id">
     <a  class="nav-link" :class="{ 'active show' : index === 0 }" href="#settings" data-toggle="tab" @click="editModal(checkoutplan)">Checkout Plan {{index +1}}</a>
</li>
</ul>
</div>

Ваш код, кажется, щелкает первым li после вызова API! Таким образом, метод, который вы будете вызывать, - editModal({firstItem}). Как насчет вызова метода напрямую, не нажимая, как

axios.get("api/checkoutplan")
    .then(({ data }) => {this.checkoutplans = data;this.editModal(this.checkoutplans[0]) // direct call });

Созданный метод не готов к состоянию для элемента документа, поэтому вы не можете вызвать элемент документа в этом методе

0
ответ дан デビット 28 March 2019 в 05:01
поделиться

Вы связали событие клика в теге href a.nav-link. не так попробуйте

document.querySelector("a.nav-link:first-child").click()
0
ответ дан dagalti 28 March 2019 в 05:01
поделиться
var button = document.querySelector("input[type=button]");
button.addEventListener("click", function() {
  alert("button was clicked");
})
0
ответ дан JIYAUL MUSTAPHA 28 March 2019 в 05:01
поделиться
document.querySelector('.nav-link');

Пожалуйста, попробуйте этот код.

0
ответ дан Nilesh Patel 28 March 2019 в 05:01
поделиться
Другие вопросы по тегам:

Похожие вопросы: