Ich habe Daten in folgendem Format
const groupedOptions = {
11: {
id: 11,
type: 'single',
label: 'Gruppe 1',
selected: 113,
options: [
{
id: 111,
name: 'Option 1.1'
groupId: 11
},{
id: 112,
name: 'Option 1.2'
groupId: 11
}{
id: 113,
name: 'Option 1.3'
groupId: 11
}
]
},
22: {
id: 22,
type: 'multi',
label: 'Gruppe 2',
selected: [222],
options: [
{
id: 221,
name: 'Option 2.1'
groupId: 22
},{
id: 222,
name: 'Option 2.2'
groupId: 22
}{
id: 223,
name: 'Option 2.3'
groupId: 22
}
]
}
}
Diese loope ich im vue.js twig-Template und blende anhand des types entweder ein single-select oder multi-select ein (vereinfacht):
<template v-for="propertyGroup in groupedOptions">
<sw-multi-select
v-if="propertyGroup.type === 'select'"
v-model="groupedOptions[propertyGroup.id].selected"
:options="propertyGroup.options"
@change="changeSelectValue"
/>
<sw-single-select
v-else-if="propertyGroup.displayType === 'single'"
v-model="groupedOptions[propertyGroup.id].selected"
:options="propertyGroup.options"
@change="changeSelectValue"
/>
</template>
In den Events setze ich dann die Variable, die ich in v-model angegeben habe, damit sich der value-Wert des Feldes anpasst:
changeSelectValue(newValue){
const groupId = this.getGroupId(newValue);
changeSelectValue[groupId].selected = newValue;
}
Aber das Select-Feld wird einfach nicht aktualisiert. Im single-select bleibt der initale Wert stehen und im multi-select kommt kein neuer hinzu. Wenn das multi-select aber einmal schließe und wieder öffne, ist aber der Haken an dem neu hinzugefügten Wert:
Hier sieht man, das Feld hat den Initialen Wert Leder aber die drei hinzugefügten Werte Plane, Polyamid und Nylon, haben nur einen Haken und sind nicht oben in der Box mit drin.
Ich verstehe wirklich nicht, was ich falsch mache…