Change value of DOM elements with Vue.js

Question

I have a radio button and a text box on the UI. Based upon the selection in radio button field, I show/hide the text box(s) as shown below:

onChangeUpdateAffectedFields = Custom event to show/hide text box

params : field object which has field specific properties (id, name, inputType, value, visibility etc.)

formData : List of all the fields as pair

    <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, ""); 
    });
  }
}

The value on this text box component remains the same even after this.$set(this.formData,fld.id, "") . Is there any other way of resetting?

Answer 1

Note you can simply access elements in the template by defining a ref attribute.

<input ref="myElement">

Then you can access it in your script:

this.$refs.myElement

But in your case, I think the better ways is simply to bind some values to your inputs, and then simply use a v-if.

Basically:

<input type="checkbox" value="test" v-bind:checked="this.checkState">
<div v-if="checkState">Only shows when checkState is true!</div>

The basic example of vue in JSFiddle shows this technique, with multiple checkboxes: https://jsfiddle.net/8wadjkLe/