Why v-text is not working to show a String

user_14255029 0
Viewed 315

I tried to show particular string using v-text. But it shows nothing.

Tried code

ccc.handlebars

<div id="app">
  <div class="input-group mb-3">
    <input type="text" class="form-control" v-text="getValues[0].value">
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      'bulk': {{{bulks}}}
    },
    computed: {
      getValues: function() {
        return this.bulk;
      }
    },
    methods: {},
  });
</script>

getValues retuens JSON

[
  { name: "Dauth", age: "18", value: "TGFR123" }
]

I want to show TGFR123 in the text box

Above getValues returns the correct JSON. But v-text="getValues[0].value" not shows the string. Help me to solve this.

vue.js
2 Answers

v-text does not work on input.

If you want to set the value of an input use :value or v-model

var app = new Vue({
  el: '#app',
  data: {
    bulk: [{
      name: "Dauth",
      age: "18",
      value: "TGFR123"
    }]
  },
  computed: {
    getValues: function() {
      return this.bulk;
    }
  },
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div id="app">
  Bind : <input type="text" :value="getValues[0].value">
  v-model : <input type="text" v-model="getValues[0].value">
  <div>Result : {{getValues[0].value}}</div>
</div>

With v-model the data will be changed with the user input

v-text

value binding

user_56719190

You can use v-model or v-bind:value to insert this value in your input

var app = new Vue({
  el: '#app',
  data: {
    bulk: [{id: 123, name: "Test", value: "NerF21_346"}]
  },
  computed: {
    getValues() {
      return this.bulk[0].value
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="getValues">
</div>

v-model documentation

user_139913160
Related