Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mullema opened this issue Oct 8, 2019 · 2 comments

Comments

@mullema
Copy link

@mullema mullema commented Oct 8, 2019

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
      }
    }
  },
@mullema mullema changed the title Panel: k-input $props and $attrs not reactive to child component Panel: k-input $props and $attrs not reactively passed to child component Oct 8, 2019
@mullema

This comment has been minimized.

Copy link
Author

@mullema mullema commented Oct 8, 2019

ah haven't seen this one: #2075

@bastianallgeier

This comment has been minimized.

Copy link
Contributor

@bastianallgeier bastianallgeier commented Oct 9, 2019

I will close this in favor of: #2075

@distantnative distantnative added this to the 3.3.0 milestone Oct 11, 2019
@distantnative distantnative self-assigned this Oct 11, 2019
distantnative added a commit that referenced this issue Oct 11, 2019
@distantnative distantnative removed this from the 3.3.0 milestone Oct 11, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
You can’t perform that action at this time.