[Vuejs]-Get components from custom attributes with vue?

by

0👍

✅

In Vue the template is not to be read – inputs are possible through bindings (like v-model).

See this snippet:

const app = new Vue({
  data: {
    formNumber: 1,
    text: ''
  }
})

app.$mount('[myCustomAttribute="mounthere"]')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div myCustomAttribute="mounthere">
  <form :form-number="formNumber" method="post">
    <label for="text1">
      From{{ formNumber }} input:
    <input id="text1" type="text" v-model="text" />
    </label>
  </form>
  {{ text }}
</div>

formNumber is also defined in the data attribute and bound to the form-number attribute, which also appears in the HTML.

EDIT

el: "#app" is just a convention for the basic Vue app. You can choose where to mount the app by any valid selector – like [myCustomAttribute="mounthere"] also works.

Leave a comment