我的 UI 上有一个单选按钮和一个文本框。根据单选按钮字段中的选择，我显示/隐藏文本框，如下所示:
onChangeUpdateAffectedFields = 用于显示/隐藏文本框的自定义事件
params:具有字段特定属性(id、名称、inputType、值、可见性等)的字段对象
formData:所有字段成对的列表
<template>
<div>
<FormComponent :schema="this.getSchemaFor('Myfieds')" v-model="formData"
@onChangeUpdateAffectedFields ="onChangeUpdateAffectedFields"
/>
</div>
</template>
methods: {
onChangeUpdateAffectedFields: function(params) {
params.field.affectedField.forEach(element => {
const seq = parseInt(params.field.id.split("_")[1]);
var fld = <Find my field logic>;
fld.visibility = <set the visibility based upon field's properties>;
this.$set(this.formData,params.field.id, params.fieldValueNew);
//Reset value - This code is not working
this.$set(this.formData, fld.id, "");
});
}
}
即使在 this.$set(this.formData,fld.id, "") 之后，此文本框组件上的值仍保持不变。还有其他方法可以重置吗？
最佳答案
请注意，您可以通过定义 ref 属性来简单地访问模板中的元素。
<input ref="myElement">
然后您可以在脚本中访问它:
this.$refs.myElement
但就您而言，我认为更好的方法是将一些值绑定(bind)到您的输入，然后简单地使用 v-if。
基本上:
<input type="checkbox" value="test" v-bind:checked="this.checkState">
<div v-if="checkState">Only shows when checkState is true!</div>
JSFiddle 中 vue 的基本示例展示了这种技术，带有多个复选框: https://jsfiddle.net/8wadjkLe/
关于javascript - 使用 Vue.js 更改 DOM 元素的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51811037/