I am facing a perplexing issue that has me stumped. Despite my attempts to replicate the error, the code below seems to be functioning perfectly!
Here is what is expected to occur:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<middleman :items="items" :selected="selected" @update="update"></middleman>
</div>
<script type="text/x-template" id="checkbox">
<label :for="$vnode.key">
{{ value }}
<input type="checkbox"
:value="value"
:id="$vnode.key"
@change="$emit('update', $event)"
:checked="isSelected(value)">
</label>
</script>
... (Code continues)
The above snippet represents the structure of my code. It consists of a root component, a middleman, and then individual checkboxes...
However, my implementation is resulting in this unexpected behavior: https://i.sstatic.net/rnssk.gif
Let's take a look at the similar code utilizing single-file components:
// Root.vue
<template>
<div class="app-search">
<div class="app-search__facets">
<facet v-for="(facet, key) in facets"
@update="updateFacet(...$event, key)"
:facet="facet"
:label="key"
:data="items[key]"
:key="key"/>
</div>
</div>
</template>
... (Code continues)
// Facet.vue
<template>
<div class="app-search__facet">
<p class="app-search__facet--title">{{ label }} ({{ selected }})</p>
<component :is="facet.control"
v-for="(value, index) in filter"
:data="value"
:value="facet.selected"
:key="`facet-${label}-${index}`"
@value="update($event)" />
</div>
</template>
... (Code continues)
// Checkbox.vue
<template>
<label :for="$vnode.key" class="app-search__checkbox">
{{ data.value }} ({{ data.count }})
<input type="checkbox"
:id="$vnode.key"
:value="data.value"
@change="$emit('value', $event)"
:checked="isSelected">
</label>
</template>
... (Code continues)
Can anyone shed some light on what might be causing this discrepancy?