In Vuejs, how to add watcher to all props and use the same function as a callback?

Question

As the title, I want to add watcher and the same callback for all of the props, but I neet to code like this in sub-component:

<script>
export default {
  props: {
    a: String,
    b: String,
    c: String
  },
  watch: {
    a (v) { this.handler(v) },
    b (v) { this.handler(v) },
    c (v) { this.handler(v) },
  },
  methods: {
    handler (v) {
      // code...
    }
  }
}
</script>

And do you know how to simplify this?

Bert · Accepted Answer · 2017-07-25 03:16:07Z

2

Use a function to build your component.

function buildComponent(properties){
  const base = { methods:{ handler(v){ console.log(v) }}, props:{}, watch:{}}

  for (let prop of properties){
    base.props[prop] = String
    base.watch[prop] = function(v) {this.handler(v)}
  }
  return base
}

export default buildComponent(["a","b","c"])

Vue is just javascript.

answered Jul 25, 2017 at 3:16

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

In Vuejs, how to add watcher to all props and use the same function as a callback?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related