Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

afoysal's avatar

v-model is not working in vuejs2

I have a form field like below

<input type="text" :value="addressObj.name" v-model="dname">

It is not working. But below code is working

<input type="text" :value="addressObj.name">

I have data() like below

data() {
     return  { 
        dname: '',
     }
},

Here I am iterating over addressObj. addressObj.name is a value of that addressObj object. When I add v-model="dname" it is creating the issue. I have no issue with addressObj.name.

Why v-model is not working here ?

0 likes
3 replies
franckysolo's avatar

Can you show up your js code?

I think you have to use v-model or :value not both!

1 like
franckysolo's avatar

Did you try? :

<input type="text" v-model="dname">

Show me the part of code where you use addressObj

ok i saw your edit, i will respond with code example

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form>
      <input type="text" v-model="name" :value="canNotUseBindValueWithVmodel">
    </form>
    <pre>
      {{ name }}
    </pre>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name: '',
      canNotUseBindValueWithVmodel: ''
    }
  },
  mounted () {
  }
}
</script>

This work :

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form>
      <input type="text" v-model="name">
    </form>
    <pre>
      {{ name }}
    </pre>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name: '',
      canNotUseBindValueWithVmodel: ''
    }
  },
  mounted () {
  }
}
</script>

Maybe you have to read more vuejs docs ;)

https://vuejs.org/v2/guide/forms.html

https://vuejs.org/v2/guide/computed.html

1 like

Please or to participate in this conversation.