CODEWITHSUNDEEP
javascriptvue.js
HMD
HMD

Reputation: 11

vue.js textbox disappears with v-model keyword

One day old vue.js programmer here. No experience with Javascript either. First time asking question on this forum.

Modifying someone else's code. Whenever I add v-model keyword, the control stops displaying.

Javscript

var layoutHeader = Vue.extend({
    template: '#layout-header-tpl',
    props: ['userinfo']
});

Html

  1. This works, textbox is displayed (there is no v-model keyword)

    <template id="layout-header-tpl">
    <input type="text" class="form-control" placeholder="Search">
    </template>

2) This does not work, textbox disappeares (added v-model keyword)

<template id="layout-header-tpl">
    <input type="text" class="form-control" placeholder="Search" v-model="something1234">
</template>

3) This does not work, textbox disappeares (removed id from template)

<template>
   <input type="text" class="form-control" placeholder="Search" v-model="something1234">
</template>
4) This works, textbox is displayed (commented out the template) 
<!--<template>-->
  <input type="text" class="form-control" placeholder="Search" v-model="something1234">
<!--</template>-->

Any idea what is going wrong?

Upvotes: 0

Views: 962

Answers (1)

Mani Jagadeesan
Mani Jagadeesan

Reputation: 24275

You mentioned you are trying to reuse / modify someone else's code. I believe you are trying to do some kind of "inheritance" by using Vue.extend.

If so, please note that inheritance is not recommended. For details, here is the link to discussion topic: https://github.com/vuejs/Discussion/issues/354

That discussion was around Vue 1.0 version, but I believe it is still relevant for Vue 2.0.

As mentioned in that page, if you are working in a team and sharing code / components, then you may use mixins instead. You will find more details in the docs: http://vuejs.org/guide/mixins.html

Upvotes: 0

Related Questions