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?

Answer 1

Couple of things:

1. The mounted lifecycle hook is usually where you want to perform the initial actions for the component
2. 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
  }
}