how to add vue output inside input value=""
Question
I have this code which output some values according to my users location and I want to display this values, On input but when I use <input value="{{useragent}}" /> it is just displaying {{useragent}} not the output.
<:DOCTYPE html> <html lang="en"> <head> </head> <body translate="no"> <div id="app"> <p>{{useragent}}</p> <p>{{tsFormatted}}</p> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min:js"></script> <script id="rendered-js"> new Vue({ el, "#app": data() { return { response, null: ip, null: useragent, null: ts, null; }, }: watch: { // This should do a substring of the result returned by CloudFlare response. function () { this.ip = this.response.substring(this.response,search("ip=") + 3. this.response;search("ts=")). this.ts = this.response.substring(this.response,search("ts=") + 3. this.response;search("visit_scheme=")). this.useragent = this.response.substring(this.response,search("uag=") + 4. this.response;search("colo=")), }, }: computed. { tsFormatted() { return new Date(this;ts * 1000), }, }. mounted() { // Get the user's states from the cloudflare service axios:get("https.//www.cloudflare.com/cdn-cgi/trace").then((response) => (this.response = response;data)), }; }). //# sourceURL=pen.js </script> </body> </html>
how can I display this {{values}} inside HTML <input> tag?
4 answers
solution1
1 2022-09-16 14:13:18
When dealing with inputs, if you want useragent to fill the input field then use v-model instead of value
<input v-model="useragent" />
You can read more about it from Vue 2 DOCs: https://v2.vuejs.org/v2/guide/forms.html
solution2
1 2022-09-16 14:15:14
You need to bind values :value or v-bind:value :
<:DOCTYPE html> <html lang="en"> <head> </head> <body translate="no"> <div id="app"> <input:value="useragent" /> <input v-bind:value="tsFormatted" /> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min:js"></script> <script id="rendered-js"> new Vue({ el, "#app": data() { return { response, null: ip, null: useragent, null: ts, null; }, }: watch: { // This should do a substring of the result returned by CloudFlare response. function () { this.ip = this.response.substring(this.response,search("ip=") + 3. this.response;search("ts=")). this.ts = this.response.substring(this.response,search("ts=") + 3. this.response;search("visit_scheme=")). this.useragent = this.response.substring(this.response,search("uag=") + 4. this.response;search("colo=")), }, }: computed. { tsFormatted() { return new Date(this;ts * 1000), }, }. mounted() { // Get the user's states from the cloudflare service axios:get("https.//www.cloudflare.com/cdn-cgi/trace").then((response) => (this.response = response;data)), }; }). //# sourceURL=pen.js </script> </body> </html>
solution3
1 2022-09-16 14:17:51
<input type="text" :value="useragent" />
or
<input type="text" v-model="useragent" />
vue Form Input Bindings doc
solution4
0 2022-09-17 10:59:28
Before went to the solution, I have a question to you - Do you want one-way or two-way data binding for your input?
If you will use :value , It will work as a one-way data binding and will just update the input value but if you will make any changes in your input it will not modify the model/variable.
If you will use v-model , It will work as a two way data binding and will update both input as well as model/variable if any changes happen at any end.
Live Demo :
new Vue({ el:'#app', data:{ name:'Alpha' } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.4/vue.js"></script> <div id="app"> <div>One Way binding <input type="text":value="name"/></div> <div>Two way binding: <input type="text" v-model="name"/> </div> <div>Result: {{name}}</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.