Question

我有两个表单域retrieval-method和source-url，后者取决于前者的值。特别是对于source-url的特定值，应禁用文本框retrieval-method。我可以很简单地做到这一点，如下所示：

https://jsfiddle.net/o5mzhg3y/

<div id="app">
  <select name="retrieval-method" v-model="retrieval_method">
    <option value="">Choose a method</option>
    <option value="1">Upload</option>
    <option value="2">Download (Periodic)</option>
    <option value="3">Download (API Triggered)</option>
  </select>
  <input type="text" name="source-url" :disabled="!(retrieval_method>1)">
</div>

<script>
    new Vue({
      el: '#app',
      data: {
        retrieval_method: false,
        source_url: ''
      }
    })
</script>

但是，当检索方法更改为导致输入被禁用的内容时，我还希望能够将字段值重置为空字符串。但是我无法确定如何做到这一点。也许我需要实现一个方法？

理想情况下，不会忘记该值，因此，如果用户将retrieval-method更改回需要源URL的值，则该值会重新插入到文本输入中。

Answer 1

好吧，您需要做一些事情。您可以将观察者添加到您的retrieval_method属性中。当值更改时，请侦听更改，如果禁用条件为真，则将source_url保存到备份字段中。相反，您将从备份文件读回source_url。您还应该将输入绑定更改为v-model绑定，以反映更改。

new Vue({
  el: '#app',
  data: {
    retrieval_method: false,
    source_url: '',
    backupUrl: ''

  },
  computed: {
    disableUrl: function() {
      return this.retrieval_method <= 1;
    }
  },
  watch: {
    // whenever question changes, this function will run
    retrieval_method: function(newValue, oldValue) {
      if (newValue <= 1) {
        this.backupUrl = this.source_url;
        this.source_url = '';
      } else if (this.backupUrl) {     
        this.source_url = this.backupUrl;
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
  <select name="retrieval-method" v-model="retrieval_method">
    <option value="">Choose a method</option>
    <option value="1">Upload</option>
    <option value="2">Download (Periodic)</option>
    <option value="3">Dowload (API Triggered)</option>
  </select>
  <input type="text" v-model="source_url" :disabled="disableUrl" />
</div>

Answer 2

所以我最终通过将方法绑定到变更事件来弄清楚了

https://jsfiddle.net/o5mzhg3y/7/

<div id="app">
  <select name="retrieval-method" v-model="retrieval_method" v-on:change="retrieval_method_changed">
    <option value="">Choose a method</option>
    <option value="1">Upload</option>
    <option value="2">Download (Periodic)</option>
    <option value="3">Dowload (API Triggered)</option>
  </select>
  <input type="text" name="source-url" :disabled="source_disabled" v-model="source_url">
</div>

<script>
new Vue({
    el: '#app',
    data: {
        retrieval_method: '',
        source_disabled: true,
        source_url: '',
        old_source_url: '',
    },
    methods: {
        retrieval_method_changed: function (event) {
            const old_source_disabled = this.source_disabled
            this.source_disabled = !(this.retrieval_method>1)
            if( old_source_disabled != this.source_disabled) {
                if(this.source_disabled) {
                    this.old_source_url = this.source_url
                    this.source_url = ''
                } else {
                    this.source_url = this.old_source_url
                    this.old_source_url = ''
                }
            }
        }
    }
})
</script>

不过，如果有人想出一种更干净的方法来做我想做的事，我将保留这个问题

当使用vue.js更改另一个表单字段时，如何有条件地重置表单字段

2 个答案: