Vue 2: Take input value without using v-model

Asked

Viewed 2,391 times

1

I’m already detecting when the pressure is enter in the input, how can I make to catch the current value that input too? Can’t be with v-model, because I need to leave a value default, as shown in the example below:

HTML

<div id="listas-page">
     @foreach($listas as $lista)
          <input type="text" value="{{$lista->descricao}}" v-on:keyup.13="editName">
     @endforeach
</div>

JS

var listasPage = new Vue({
    el: '#listas-page',

    methods: {
        editName(event) {
            console.log(event);
        }
    }
});
javascript vue.js vue.js-2

  • Why can’t you use v-model? It’s perfect for setting a default value: https://jsfiddle.net/50wL7mdz/92446/

  • It is that I am bringing several inputs with their respective values from the bank. And I am doing this with a foreach in php.

1 answer

4


I do not recommend this blend of pure php with Vue, there are better solutions, but it is possible to get value by event.target.value, example...

new Vue({
  el: '#app',
  data : {
  	value : ''
  },
  methods : {
    editName(event) {
      this.value = event.target.value;
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input value="default" v-on:keyup.13="editName">
  {{value}}
</div>

Browser other questions tagged javascript vue.js vue.js-2

You are not signed in. Login or sign up in order to post.