gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 06:22:28 24 4
gpt4 key购买 nike

我有两个表单字段retrieval-methodsource-url,后者取决于前者的值。具体来说,对于 retrieval-method 的特定值,文本框 source-url 应该被禁用。我可以相当简单地实现这一点,如下所示:

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 的值,该值将重新插入到文本输入中。

最佳答案

好吧,您需要做一些事情。您可以将观察者添加到您的 retrieval_method 属性。当值更改时监听更改当禁用条件为真时,将 source_url 保存到备份字段中。反过来,您从备份文件中读回您的 source_url。您还应该将输入绑定(bind)更改为 v-model 绑定(bind)以反射(reflect)更改。

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>

关于javascript - 如何在使用 vue.js 更改另一个表单字段时有条件地重置表单字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59284222/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com