CODEWITHSUNDEEP
vue.jskeyup
Muamar Collins
Muamar Collins

Reputation: 89

Converting User Input into a usable function

This is all done in Vue.Js

I don't know if the title is appropriate however, the end of goal of what I'm trying to do is to have the user submit an input that I can put inside a QR Code.

Here's How I tried:

  1. Create a keyup.enter event in the new input text tag.

    <input type="text" placeholder="Enter Website Name" keyup.enter="newqrurl">

  2. Create new data, newUrl and set it equal it to " "

    data() {
  return {
    newUrl: ""
  }
},

  3. In the new function created newqrurl() I added the new data newUrl, and set it equal to = to ""

    methods: {
  newqrurl() {
    this.newUrl = " "
  }

  4. Now i want to insert the new function into my string.

    <img src="https://www.qrtag.net/api/qr_transparent_12.png?url='newUrl'" alt="qrtag">

I may make no sense, since I'm completely new to this.

Upvotes: 0

Views: 98

Answers (1)

cam
cam

Reputation: 3624

You're close!

  • You should use v-model to bind the value of your text input to the data variable.
<input type="text" placeholder="Enter Website Name" v-model="newUrl">
  • Now you can use a computed property to calculate the QR code image source
computed: {
  qrImage () {
    return `https://www.qrtag.net/api/qr_transparent_12.png?url=${this.newUrl}`
  }
}
  • And finally, change the src attribute of your img element to reference your computed property.
<img :src="qrImage" alt="qrtag">

Note the : before the src attribute.

In the end it might look something like this:

<template>
  <div>
    <input type="text" placeholder="Enter Website Name" v-model="newUrl">
    <img :src="qrImage" alt="qrtag">
  </div>
</template>

<script>
  export default {
    data () {
      return {
        newUrl: ""
      }
    },

    computed: {
      qrImage () {
        return `https://www.qrtag.net/api/qr_transparent_12.png?url=${this.newUrl}`
      }
    }
  }
</script>

Upvotes: 1

Related Questions