console.log() 不显示实际值

Question

I am iterating over a list on which I used a @click function to update some other elements. The elements indexes values are binded to selectedFixtures . I don't understand why, when I click on an element, it prints out [] and the second time I click on an element, it prints out the old value ex.: [1] . How can I work with the actual values in my function so it prints out [1] on the first time?

                        <v-chip-group
                             v-model="selectedFixtures"
                             multiple
                        >
                            <v-chip v-for="(f, i) in filteredFixtures()" :key="i" @click="selectFixture(f, i)">
                                <div class="d-flex align-baseline">
                                    <span class="font-weight-medium">{{ f.name }}</span>                                 
                                </div>
                            </v-chip>
                        </v-chip-group>

methods: {
             selectFixture(f, index) {
                console.log(JSON.stringify(this.selectedFixtures));

                if (this.selectedFixtures.length === 1) {
                    console.log('here!')                    
                }
            }
}

Answer 1

You are wanting an array of chips chosen, so you are missing multiple from your template (is this just a typo when writing question?). As to your issue with old value, when the click event happens, selectedFixtures has yet to be updated with the value added/removed. You need to wait a tick to get the correct result:

Added multiple to template:

<v-chip-group v-model="selectedFixtures" multiple> 

and adding waiting a tick in the function:

this.$nextTick(() => {
   if (this.selectedFixtures.length === 1) {
     console.log('here')
   }
})

CODEPEN

PS, as a recommendation, don't call functions in template when not needing to, I'm talking about filteredFixtures() , you could instead use a computed property.