javascript - 使用 Vue.js 更改 DOM 元素的值

Question

我的 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, "") 之后，此文本框组件上的值仍保持不变。还有其他方法可以重置吗？

Answer 1

请注意，您可以通过定义 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/