how to add vue output inside input value=""

jackson hill 0
Viewed 40

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 ?

input vue.js javascript
4 Answers

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

Mostafa Said0

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>

Nikola Pavicevic0 
<input type="text" :value="useragent" />
or
<input type="text" v-model="useragent" />

vue Form Input Bindings doc

tinystone0

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>

Rohìt Jíndal0
Related