Wie kann ich einen Klick auf eine axios gebundene Liste von Kontrollkästchen in Vuejs 2 auslösen?

Question

Ich versuche,() ein gebundenes Kontrollkästchen in Vue.js 2. Ich möchte auf ein bestimmtes dynamisches Kontrollkästchen im monted() - Lebenszyklusereignis, ohne jQuery klicken.

<script src="https://unpkg.com/vue"></script> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

<div id="app"> 
    <div ref='users' v-for="user in users"> 
    <input type='checkbox' 
     :ref='user.username' 
     :id='user.id' 
     :value='user.username' />&nbsp; 
     <label :for='user.id'>{{ user.name }} [username: {{ user.username }}]</label> 
    </div> 
    <div @click="trigger" class="trigger">Click me</div> 
</div> 

<script> 
new Vue({ 
    el: '#app', 
    data: { 
    users: '' 
    }, 
    methods: { 
    popUsers: function() { 
     axios.get('https://jsonplaceholder.typicode.com/users').then(res => { 
     this.users = res.data; 
     }); 
    }, 
    trigger() { 
     console.log(this.$refs); 
     this.$refs.Karianne[0].click();//works 
    } 
    }, 
    created: function() { 
    this.popUsers(); 
    }, 
    mounted: function() { 
    console.log(this.$refs); 
    this.$refs.Karianne[0].click(); //doesn't work. i want to "click Karianne" when everything is loaded. 
    } 
}) 
</script> 

Hier ist meine jsfiddle. https://jsfiddle.net/zippyferguson/we8Latcw/21/

diese $ refs.Karianne [0] .click(); funktioniert, wenn Sie auf "Click me" klicken, aber nicht auf "mounted". Zu früh?

Answer 1

Versuchen Sie es so.

mounted() { 
    Vue.nextTick(() => { 
    this.$refs.Karianne[0].click() 
    }) 
} 

Ich denke, dass aus irgendeinem Grunde $refs im Moment noch leer ist, die vue Komponente der Montage. Wenn Vue.nextTick nicht hilft, versuchen Sie es innerhalb eines Timeout-Callbacks.

mounted() { 
    setTimeout(() => { 
    this.$refs.Karianne[0].click() 
    }, 200) 
} 

Answer 2

new Vue({ 
    el: '#app', 
    data: { 
    users: '' 
    }, 
    methods: { 
    popUsers: function() { 
     let self = this; 
     axios.get('https://jsonplaceholder.typicode.com/users').then(res => { 
     this.users = res.data; 
     self.$nextTick(function() { 
      self.$refs.Karianne[0].click() //works 
     }) 
     }); 
    } 
    }, 
    created: function() { 
    this.popUsers(); 
    }, 
    mounted: function() { 
    let self = this; 
    self.$nextTick(function() { 
     self.$refs.Karianne[0].click() //doesn't work 
    }) 
    } 
})