Setting Attribute to a div in Vue.js

Question

I've got a Vue file and I would like to set an 'action' attribute of my form.

<template>
  <div>
    <form>
    </form>
  </div>
</template>

export default {
  created() {
    var test = document.getElementById("form");
    test.setAttribute('action', 'file.php');
  }

But setting it in a lifecycle hook doesn't work. What should I do?

You should do this within Vue (bind the attribute), not by using the DOM directly. — SLaks
– SLaks, Commented Feb 6, 2018 at 20:35
Yeah, thanks it was unnecessary question, it worked! Thanks. — kabugh
– kabugh, Commented Feb 6, 2018 at 20:41

sliptype · Accepted Answer · 2018-03-11 14:18:14Z

1

Couple of things:

The mounted lifecycle hook is usually where you want to perform the initial actions for the component
Using getElementById goes against the way Vue is supposed to be used

Something like this would make more sense:

<template>
  <div>
    <form :action='action'>
    </form>
  </div>
</template>

export default {
  data() {
    return {
      action: 'file.php'
    }
  },
  mounted() {
    // initialize things here
  }
}

edited Mar 11, 2018 at 14:18

answered Feb 6, 2018 at 20:38

sliptype

2,9741 gold badge18 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Setting Attribute to a div in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related