CODEWITHSUNDEEP
vue.jsvuejs2vue-component
blak3r
blak3r

Reputation: 16516

Vue computed property that isn't referenced anywhere

Question

How do you create a dummy computed property which will get called when model elements it depends on change without having to said computed property?

Background

My parent is a number of form controls which set ajax query params. When they change I need to fetch data form the server and then I $emit the new data to child components.

Initially, I had a method called updateTable that is invoked via @change="updateTable()" on each of the elements.

Didn't like needing to add @change to all my input's so I created a dummy computed property to make use of the automatically dependency detection/recalculation. The problem is Vue is "too" smart in my case since I don't actually reference the computed property anywhere. A workaround was to add <div style="display:none">{{dummyProp}}</div> but that seems hacky.

Is my pattern wrong? Or is there a better Vue way of doing this?

Upvotes: 1

Views: 478

Answers (2)

Roy J
Roy J

Reputation: 43881

You should have a computed generate the query parameter object. When form inputs change, the query parameter object gets updated. A watcher on that sends the ajax request, whose callback updates what I hope are props to the child components.

If your form elements are bound to variables, you shouldn't have been using @change anyway, you should have been watching the variables -- and you will be, since that's what a computed does.

Upvotes: 1

Tyler
Tyler

Reputation: 11509

Your computed property doesn't need to be referenced by your HTML to stay reactive. For instance, you can have:

data: {
  return {
    inputA: 'A',
    inputB: 'B'
  }
},
computed: {
  myProperty() {
    return this.inputA + this.inputB
  }
},
methods: {
  callWithMyProperty() {
    ajaxFunction(this.myProperty)
  }
}

Whenever you call callWithMyProperty with a pattern like this, it will use the latest versions of inputA and inputB. I assume you are probably using a different (perhaps non-Vue) pattern and that is causing the issue.

Upvotes: 1

Related Questions