how to add vue output inside input value=""-CodePudding

I have this code which output some values according to my users location and i want to display this values, on input but i when i use <input value="{{useragent}}" /> it will normally display {{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 it only shows in < p> or <text elements

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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

vue Form Input Bindings doc