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

Computed Setter Does Not Work In Scoped Slot #10805

Open
pxwee5 opened this issue Nov 7, 2019 · 2 comments
Labels

Comments

@pxwee5
Copy link

@pxwee5 pxwee5 commented Nov 7, 2019

Version

2.6.10

Reproduction link

https://codepen.io/jameswee/pen/BaaxLmE

Steps to reproduce

  1. Create computed setter in parent and pass it into scoped slot
  2. Attach computed setter via scoped slot into child's v-model
  3. Test

A working example is available if you comment out line 2 and uncomment line 3.

What is expected?

Editing the input box should trigger the alert function

What is actually happening?

Editing input box isn't triggering the computed setter.

@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Nov 7, 2019

This is inherent to how reactivity works in Vue (by setting reactive keys in objects) and how slots receive the data as parameters in a function.
To make it work, you would have to wrap the variable in some kind of container that has reactive keys:

const parent = Vue.component('parent', {
  template: '<div><slot :container="fooContainer" /></div>',
  
  computed: {
    foo: {
      get: function() {
        return "foo";
      },
      set: function(value) {
        alert(value);
      }
    },
    fooContainer() {
      const o = {}
      Object.defineProperty(o, 'foo', {
        get: () => this.foo,
        set: foo => this.foo = foo
      })
      return o
    }
  }
})

new Vue({
  el: '#app',
  components: {
    parent
  },
  template: `
    <parent>
      <template #default="{ container }">
        <input v-model="container.foo" />
      </template>
    </parent>`,
})

For it to work without containers, we would have to make the object you named slot reactive but that would add a cost for every slot usage and I think that would impact more users than it helps

@posva posva added the discussion label Nov 7, 2019
@pxwee5

This comment has been minimized.

Copy link
Author

@pxwee5 pxwee5 commented Nov 7, 2019

Hmmm, this is tricky isn't it. At first glance it's really hard to understand the usage of fooContainer function, which eventually makes the code really hard to review.

It'll be nice if there's a way to make these a bit more consistent. I wonder if this will be addressed in v3 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.