UPDATE Here is a recreation of the issue I am facing
I need to dynamically bind with the correct index, how can I achieve this?
CLICK THE CODEPEN LINK ABOVE FOR THE OLD CODE CLICK THE CODEPEN LINK ABOVE FOR THE OLD CODE
<template>
<div>
<ul class="filters">
<form action>
<li v-for="(filter , index ) in filters " :key="filter.id">
{{index}}
<label for="filters">{{filter.title }} ({{filter.count}})</label>
<input
type="text"
name="filters"
:id="index+filter.title"
:placeholder="filter.title"
v-model="choosenFilters[0][index]"
/>
<input
type="checkbox"
name="filters"
:id="filter.title"
:value="filter.title"
v-model="choosenFilters[0][index]"
/>
</li>
</form>
</ul>
</div>
</template>
CLICK THE CODEPEN LINK ABOVE FOR THE OLD CODE CLICK THE CODEPEN LINK ABOVE FOR THE OLD CODE
<script>
export default {
name: "FilterConfigurationPanel",
data() {
return {
checked: false,
choosenFilters:{
name:'',
label:'',
checked:'',
},
shown: null,
};
},
created() {
this.$store.dispatch("filtersAPi");
},
computed: {
...mapState(["filters"]),
},
};
</script>