如何刷新v-if语句中的内容?

Question

我得到了一个下拉组件与v-modelvalue，每当我在我的输入输入密码或改变isHidden值，然后我从下拉菜单中选择另一个值在v-if="value"div不会重置，基本上我想重新渲染这个div，清空所有输入并重置值，这是可以实现的?如果它在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>

Answer 1

我会像这样添加一个@change到你的Multiselect，当下拉菜单改变时调用一个函数来重置值:

<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>

然后在你的methods:

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

Answer 2

有几种方法可以重新呈现组件。本文讨论了这些方法https://michaelnthiessen.com/force-re-render.

如果这不适合您，那么我认为最好的解决方案是简单地使用Multiselect

上的@change方法重置值。