当 VueJS 中的某些数据属性绑定到 v-if 隐藏的 DOM 元素时，我需要一些帮助来销毁/取消设置这些数据属性。
我有一个现实世界的场景，但是，出于这篇文章的目的，我将坚持一个简单的例子。
在我的 HTML 中，我有以下内容：
<html><body>
<div id="app">
<select v-model="myFields.SelectedValue">
<option disabled value="">Choose a Programming language</option>
<option>PHP</option>
<option>Python</option>
<option>C#</option>
</select>
<input v-if="myFields.SelectedValue == 'PHP'" type="text" label="Your favorite version of PHP" v-model="myFields.favPHP">
<br>
<pre>
{{myFields}}
</pre>
</div>
</body>
</html>
在 JavaScript 上，我得到了这个：
new Vue({
el: "#app",
data: {
myFields:{
SelectedValue: ''
}
}
})
当我在选择字段中选择选项"PHP"时，VueJS 会按预期呈现输入字段。然后我可以键入任何内容，该值将绑定到属性myFields.favPHP。 问题是：如果我决定更改选择字段中的选项，例如"Python"，文本输入字段将被删除，因为它必须删除，但myFields.favPHP不是未设置的。 我不认为有实现这一目标的原生方法，我不知道我能做些什么来解决这个问题。
这是一个工作小提琴：https://jsfiddle.net/bneeer/5jumo3aq/1/
任何人？
尝试添加一个删除不必要的值的v-on:change事件处理程序。
new Vue({
el: "#app",
data: {
myFields: {
SelectedValue: ''
}
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="myFields.SelectedValue" v-on:change='delete myFields.favPHP'>
<option disabled value="">Choose a Programming language</option>
<option>PHP</option>
<option>Python</option>
<option>C#</option>
</select>
<input v-if="myFields.SelectedValue == 'PHP'" type="text" label="Your favorite version of PHP" v-model="myFields.favPHP">
<br>
<pre>
{{myFields}}
</pre>
</div>破坏属性的原生方法肯定存在于JavaScript中，它被称为删除运算符：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete。
您的JS部分看起来像这样：
new Vue({
el: "#app",
data: {
myFields:{
SelectedValue: '',
}
},
methods: {
deleteFavPhpField($event) {
if($event.target.value !== 'PHP')
delete this.myFields.favPHP;
}
}
})
在 HTML 部分中，您将在选择元素上添加input触发器，如下所示：
<select v-model="myFields.SelectedValue" @change="deleteFavPhpField($event)">
但我建议另一种方法delete因为运算符不应该轻易使用。您可以让字段从一开始就在数据中设置myFields.favPHP字段，<pre>元素中，您可以显示计算值，超出newFields，但如果它为空，则无需favPHP。例如，您计算的内容可能如下所示：
computed: {
formattedFields() {
if(this.myFields.favPHP) return { ...this.myFields };
return {SelectedValue: this.myFields.SelectedValue}; // here you can use some iterator if you have more fields
}
}