How to refresh content in v-if statement?

user_16641114 0
Viewed 128

I got a dropdown component with v-model value, whenever I type a password in my input or change the isHidden value, and then I select another value from dropdown the items in v-if="value" div won't reset, basically I want to re-render this div, empty all inputs and reset the values, is this achievable somehow? Shouldn't it reset automatically if it's inside a v-if?

<Multiselect :options="passwordTypes()" v-model="value" />

<div v-if="value">
<input type="text" placeholder="Password" />
<h4>Is Hidden</h4>

<input type='checkbox' name='toggle' @click="isHidden = !isHidden" />
<label class="toggle-label" for="toggle" />
</div>
vuejs3 vue.js
2 Answers

I would just add an @change to your Multiselect like this which calls a function to reset the values when the dropdown changes:

<Multiselect :options="passwordTypes()" v-model="value" @change="resetForm" />

<div v-if="value">
  <input type="text" placeholder="Password" />
  <h4>Is Hidden</h4>

  <input type='checkbox' name='toggle' @click="isHidden = !isHidden" />
  <label class="toggle-label" for="toggle" />
</div>

Then in your methods:

methods : {
  resetForm() {
    // Set all values to their defaults
  }
}
user_48267400

There are several methods for re-render a component. This article discusses these ways https://michaelnthiessen.com/force-re-render.

If this does not suit you, then the best solution in my opinion would be to simply reset the values using the @change method on the Multiselect

user_123552500
Related