VueJS - 如何取消设置绑定到用 v-if 隐藏的元素的数据属性？答案

【问题标题】：VueJS - How to unset a data property that is bound to an element hidden with v-if?VueJS - 如何取消设置绑定到用 v-if 隐藏的元素的数据属性？
【发布时间】：2020-03-29 10:37:31
【问题描述】：

当这些属性绑定到用 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 会按预期呈现输入字段。然后我可以输入任何内容，该值将绑定到属性myFields.favPHP。问题是：如果我决定在选择字段中更改我的选项，例如“Python”，文本输入字段将被删除，因为它必须是，但 myFields.favPHP 没有取消设置。我不认为有实现这一点的本地方法，我不知道我能做些什么来解决这个问题。

这是一个有效的小提琴：https://jsfiddle.net/bneeer/5jumo3aq/1/

有人吗？

【问题讨论】：

标签： javascript html vue.js data-binding

【解决方案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>

【讨论】：

【解决方案2】：

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 部分，您可以在 select 元素上添加 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
  }
}

【讨论】：

有趣的方法！我尝试了另一个解决方案（删除）并且它当然有效，但我明白了你的意思，我的项目代码中的某些内容似乎仍然不正确。我会尽快尝试您的建议