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?

You should show html template too. Did you set attribute v-model into target input control? — hgiasac
– hgiasac, Commented Aug 12, 2018 at 17:31

EmmanuelBeziat · Accepted Answer · 2018-08-12 23:24:51Z

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/

edited Aug 12, 2018 at 23:24

answered Aug 12, 2018 at 18:56

EmmanuelBeziat

7349 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change value of DOM elements with Vue.js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related