Rewrite jQuery Disbale button using javascript in a vue app

Question

I have old jQuery code which I rewriting in javascript for a Vue.js application.

function DisableSubmit() {
    submitButton.prop('disabled', true);
    submitButton.attr('data-enabled-value', submitButton.val());
    submitButton.val('WORKING...');
    jQuery(config.formName + ' .spinner-container.fullscreen').show();
  }

This is the corresponding html

<div class="col-xs-3" style="float: right;"><span><input aria-label="Submit"
                            class="SubmitButton" href="#" id="register"
                            name="Submit" style="color: #fff; padding: 1rem; background-color: #c8102e;" type="submit"
                            value="Submit" /> </span>

                    <div class="clearfix"></div>

                    <p class="require center" style="color: #fff; margin-left: 1rem;">*Required</p>
                </div>

My question is what will be best approach towards this.

Also, I am exactly sure if we have replacements for .prop() and .attr() in javascript

Perhaps the approach in stackoverflow.com/questions/57403395/convert-from-jquery-to-vue/… might help you. — wwerner
– wwerner, Commented Nov 25, 2019 at 8:04

tony19 · Accepted Answer · 2022-07-15 01:09:51Z

0

Typically, you wouldn't manipulate DOM elements but rather your vue component's state and then bind that state to the DOM.

You'll want to

bind the button's (data-) attributes to your vue component's state: https://v2.vuejs.org/v2/guide/syntax.html#Attributes
bind the button click to a method in your component setting that state: https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods

Here's a working example: https://codesandbox.io/s/stack-overflow-q-59026962-onb7j. I left out the spinner toggle & removed some markup for clarity.

edited Jul 15, 2022 at 1:09

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 25, 2019 at 8:22

wwerner

4,3171 gold badge24 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Rewrite jQuery Disbale button using javascript in a vue app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related