-
-
Notifications
You must be signed in to change notification settings - Fork 186
Closed
Description
I am pretty new to Vue, if the wording is wrong you're welcome to help me out:
Describe the bug
When updating the options of a k-select-field the new value gets stuck in the k-input component and is not passed to it's child components.
To Reproduce
- create a custom field:
panel.plugin('my/test', {
fields: {
'test': {
props: {
value: String,
label: String
},
data() {
return {
options: [
{text: 'A', value: 'A-value'},
{text: 'B', value: 'B-value'},
]
}
},
methods: {
updateme() {
this.options = []
}
},
template: `
<section>
<a @click="updateme()">[click me update]</a>
<k-select-field :label="label" type="select" theme="field" :options="options" :value="value">
</section>
`
}
}
});<?php
Kirby::plugin('my/test', [
'fields' => [
'test' => []
]
]);- add it to a blueprint
fields:
test:
type: test
label: my Test- click in the panel on the text [click me update]
- see that the select input is not changing
- find in the Vue debug console that the attributes/props are passed along until k-input but never into k-select-input
Expected behavior
The select input should change (all options should be gone)
Kirby Version
3.2.5
Additional context
When I followed the attrs/props along the child components it showed that the last reaction on them happens in the k-input component.
here the attrs and props are combined into a inputProps variable
data() {
// ...
inputProps: {
...this.$props,
...this.$attrs
}
};
},which seems to be not reactive.
Making inputProps a computed property solves the problem:
computed: {
inputProps() {
return {
...this.$props,
...this.$attrs
}
}
},Metadata
Metadata
Assignees
Labels
No labels