Why v-text is not working to show a String - vue.js

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/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

Answer 2

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