Я не думаю, что вы можете выбрать родителя только в css.
Но поскольку у вас уже есть класс .active
, не было бы легче перенести этот класс на li
(вместо a
)? Таким образом, вы можете получить доступ только к li
и a
только через css.
Сначала добавьте 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
});
как ваш комментарий, я попытался, как показано ниже, в смонтированном методе (не создан). Осторожно 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 });
Созданный метод не готов к состоянию для элемента документа, поэтому вы не можете вызвать элемент документа в этом методе
blockquote>
Вы связали событие клика в теге href a.nav-link
. не так попробуйте
document.querySelector("a.nav-link:first-child").click()
var button = document.querySelector("input[type=button]");
button.addEventListener("click", function() {
alert("button was clicked");
})
document.querySelector('.nav-link');
Пожалуйста, попробуйте этот код.