Vue.js - 从父组件中清除子表单字段

Question

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

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?

Answer 1

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