CODEWITHSUNDEEP
vue.js
Ari
Ari

Reputation: 6169

Conditional image source with Vue based on boolean value

I currently have my image tag set up like so:

<img v-if="highQuality" :src="post.data.url">
<img v-if="highQuality == false" :src="post.data.thumbnail">

As you can see the image src changes based on whether highQuality is true or false.

I have a select tag with the two bool options, if I start on false and change it to true it updates the images to high quality sources, but if I set it back to false it seems to stay on High quality. So I'm thinking that this is a bad attempt at a vue if conditional.

is there a more "Vue" like way of writing this?

edit: extra code

DOM

<select v-model="highQuality">
     <option value="true">High Quality</option>
     <option value="false">Low Resolution</option>
</select>

JS

var app = new Vue({
        el: '#app',
        data: {
            highQuality: false,
            posts: [],
        },
});

Upvotes: 1

Views: 2855

Answers (2)

acdcjunior
acdcjunior

Reputation: 135762

The problem is your <option>s. <select> is assigning a string, not a boolean.

Don't use:

<option value="true">High Quality</option>

Use:

<option :value="true">High Quality</option>

Problematic:

var app = new Vue({
  el: '#app',
  data: {
    highQuality: false,
    posts: [],
    post: {data: {url: 'http://bc.id.au/images/fr_flag.gif', thumbnail: 'http://bc.id.au/images/de_flag.gif'}}
  },
});
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select v-model="highQuality">
     <option value="true">High Quality</option>
     <option value="false">Low Resolution</option>
  </select>

  <img v-if="highQuality" :src="post.data.url">
  <img v-if="highQuality == false" :src="post.data.thumbnail">
</div>

Fixed:

var app = new Vue({
  el: '#app',
  data: {
    highQuality: false,
    posts: [],
    post: {data: {url: 'http://bc.id.au/images/fr_flag.gif', thumbnail: 'http://bc.id.au/images/de_flag.gif'}}
  },
});
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select v-model="highQuality">
     <option :value="true">High Quality</option>
     <option :value="false">Low Resolution</option>
  </select>

  <img v-if="highQuality" :src="post.data.url">
  <img v-if="highQuality == false" :src="post.data.thumbnail">
</div>

Upvotes: 1

Decade Moon
Decade Moon

Reputation: 34286

Maybe the highQuality == false condition is failing, are you sure you're setting highQuality to exactly false?

You needn't duplicate the tag, just do this instead:

<img :src="highQuality ? post.data.url : post.data.thumbnail">

Upvotes: 2

Related Questions