Skip to content

Panel: k-input $props and $attrs not reactively passed to child component #2181

@mullema

Description

@mullema

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

  1. 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' => []
    ]
]);
  1. add it to a blueprint
fields:
  test:
    type: test
    label: my Test
  1. click in the panel on the text [click me update]
  2. see that the select input is not changing
  3. 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
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions