Why v-text is not working to show a String

Question

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.

Answer 1

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/[email protected]"></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