Имеется компонент над которым думаю:
<script setup>
import {reactive, ref} from "vue";
const categories = ref(null);
const form = reactive({
categories: [],
});
const fetchData = () => {
axios.get(route('categories')).then((response) => {
categories.value = response.data.categories;
}).catch(error => {
});
};
</script>
<template>
<div v-for="category in categories" :key="category.id">
<input v-model="form.categories"
class="form-check-input"
name="categories[]"
:value="category.id"
type="checkbox"
>
{{form.categories}}
</div>
</template>
Цель, чтобы пользователь выбрал нужные ему категории с помощью чекбоксов.
Как я пробую реализовать: фетчатся категории у которых есть айдишники в categories. Далее я пробую собрать выбранные чекбоксами категории в form.categories и там получается только одно значение всегда (последний чекбокс). В V2 нечто похожее (тольео со script и categories в data) работало без проблем. Т.е. в такой конструкции в VUE2 работает:
<script>
export default {
data() {
return {
categories: []
}
},