Vue.js - Clearing Child Form Fields from Parent Component

user_1180008 0
Viewed 231

I have a child sidebar component with some dropdowns. Simplified example:

enter image description here

You select a status here and it re renders the table/dashboard view in the parent component. That is handled via $emit in the child component like so:

selectedStatus: function(status) {
  this.$emit('updateStatus', status)
},

No issues there. Now I'd like to be able to clear or reset this input from the parent component. As I said this is a simplified example and there are many dropdowns, a couple datetime selectors, and other inputs to clear.

If I do something like

this.selectedStatus = [] in the parent, it does indeed reset/re render the table/data properly but it still shows the UI piece (ie, the selected status in the dropdown).

If I do something like

this.selectedStatus = [] in the child it does correctly remove/alter the UI piece to where it clears the dropdown.

What is the correct approach here to clear child filters/inputs from the parent?

vue.js javascript
1 Answers

I recommend you to read this article, it explains all the ways to make a child component rerender (and therefore reset it's state).

user_152051800
Related