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

Prabhat Thapa · Accepted Answer · 2018-06-22 18:15:15Z

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>

answered Jun 22, 2018 at 18:15

Prabhat Thapa

456 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh · Accepted Answer · 2018-06-22 18:06:41Z

0

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

edited Jun 22, 2018 at 18:06

answered Jun 22, 2018 at 14:48

Josh

98611 silver badges33 bronze badges

3 Comments

Gracie Over a year ago

Just having an issue with getting the image to shown when a url is entered. Seems to set it to display:none, should it be the other way round ie. != jsfiddle.net/edkmsyru

Gracie Over a year ago

Looks like the null part isn't needed,just do v-show="myimage"

Josh Over a year ago

My mistake, you are correct, it should indeed be != null. The null part could be required. For example if you type '0' I think it will still evaluate to false even though you have typed something.

Collectives™ on Stack Overflow

Data binding in VueJS to build a URL

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related