I have a input with attribute "ref" and I don't want to use v-model

<div class="form-group m-b-40">
  <input type="text" class="form-control" id="name" ref="name"  required> 
</div>
 {{showInput}}

I want to show my input value automatically. I do this

 methods: {
       showInput: function () {
            this.$refs.name.value
        },
    }

but it isn't updated.

I have a input with attribute "ref" and I don't want to use v-model

<div class="form-group m-b-40">
  <input type="text" class="form-control" id="name" ref="name"  required> 
</div>
 {{showInput}}

I want to show my input value automatically. I do this

 methods: {
       showInput: function () {
            this.$refs.name.value
        },
    }

but it isn't updated.

• javascript
• vue.js

Share Improve this question Follow edited Apr 25, 2018 at 16:56 Hitesh Kansagara 3,52633 gold badges1919 silver badges3333 bronze badges asked Apr 25, 2018 at 16:52 MohammadJavad AbbasiMohammadJavad Abbasi 17722 gold badges33 silver badges1212 bronze badges 3

• "I don't want to use v-model" why? What are you actually trying to do? – zero298 Commented Apr 25, 2018 at 17:02
• @zero298 At first I get value from api. then user can edit this value. before save it i must show this changed value – MohammadJavad Abbasi Commented Apr 25, 2018 at 17:06
• 1 I don't understand why that matters. Please explain exactly what you are trying to do, what you have tried, and what isn't working. Provide as much context as you can. The MCVE page will probably help you understand why. – zero298 Commented Apr 25, 2018 at 17:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Because the value of a ref isn't an observable object unless it's bound to the ponent instance:

data() {
    return {
        name: ''
    }
}

Then give your input a :value="name" and now it has an observer attached to it

I can't understand what you want to do,but the way you are doing it seems to be wrong.Anyway,you said i dont want to use v-model.

I am going to show you how to do it without v-model,you can fetch the input value from api(you have to write your own code for this) and set it to input:

 <template>
    <div>
      <div class="form-group m-b-40">
        <input type="text" :value="text" @input="updateValue"> 
        <hr>
      </div>
      The input value is: {{text}}
    </div>
 </template>

<script>
export default {
  data() {
    return {
        text: ''
    }
  },
  created() {
    this.fetchFromApi()
  },
  methods: {
    updateValue(value) {
        let newValue = value.target.value
        this.text = newValue
    },
    fetchFromApi() {
        //write the code to get from API the input value and then:
      this.text = 'input value' //set the input value
    }
  }
}
</script>

See it in action here