Data binding in VueJS to build a URL

Question

Having my first go with VueJS which is great. Just got a couple of issues with data binding.

• I need the customer to enter an image, so no image should show until a url is entered in the input field. At the moment, it shows a broken image whilst waiting for an image from the customer.

• I need to build a URL with a static URL (amazon.com) with the binded image appended to the url. I have tried v-bind:href with no joy

  <div class="main" id="vue-instance">
  <!-- this will be the DOM element we will mount our VueJs instance to -->
  Enter an image url:
  <input type="text" v-model="myimage">
  
  <img class="insert" style="max-height:300px" v-bind:src="myimage">
  <a href="https://amazon.com" target="_blank">Link to the image</a>
  </div>
  

Here is the code at JSFiddle

Answer 1

You can set myimage='' or null initially. Then You can use v-if statement to only show the image and image link if there is some value in myimage

<div v-if="myimage">
    <img class="insert" style="max-height:300px" v-bind:src="myimage">
    <a v-bind:href="'https://amazon.com/' + myimage" target="_blank">Link to the image</a>
</div>

Answer 2

You can use v-bind:href and then normal javascript inside the property like below

<a v-bind:href="'https://amazon.com/' + myimage" target="_blank">Link to the image</a>

note the additional '' in the v-bind property

As for not displaying the image until after a url is entered, you can use a simple v-show

<img class="insert" style="max-height:300px" v-show="myimage != null" v-bind:src="myimage">

This will hide the image when myimage is null