当这些属性绑定(bind)到用 v-if 隐藏的 DOM 元素时，我需要一些帮助来销毁/取消设置 VueJS 中的某些数据属性。
我有一个真实的场景，但是，出于本文的目的，我将坚持使用一个简单的示例。
在我的 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 将按预期呈现输入字段。然后我可以输入任何内容，该值将绑定(bind)到属性 myFields.favPHP。
问题是:如果我决定更改选择字段中的选项，例如“Python”，则文本输入字段将被删除，因为它必须如此，但 myFields.favPHP 不会未设置。
我不认为有一种本地方法可以实现这一点，而且我不知道我能做些什么来解决这个问题。
这是一个工作 fiddle :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 - VueJS - 如何取消设置绑定(bind)到使用 v-if 隐藏的元素的数据属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59179185/