Display an image corresponding to the selected radio button option

Question

Display an image corresponding to the selected radio button option

Looking for guidance on implementing this in VueJS

You can find a starting point here

I think it involves index matching, similar to how I did it with jQuery like this:


$('.Colors > li').on('mouseenter', function() {
    var i = $(this).index();
    $('.Items > li.active').fadeOut(200, function() {
      $(this).removeClass('active').parent('ul').children('li').eq(i).fadeIn(100).addClass('active');
    });
  });

But now I need help translating it into VueJS.

Appreciate any assistance. Thanks!

javascript vue.js

Answer 1

Answer №1

In order to make the radio buttons functional, it is important to assign a specific value for each option. Since you intend to compare them using the $index, this should be the value assigned.

<input type="radio" name="color" value="{{$index}}" v-model="picker">

If you want to control the visibility of elements based on certain conditions, you can utilize the v-show binding:

v-show="+$index === +picker"

By using unary +, you ensure that both sides are treated as numeric values for accurate comparison.

new Vue({
  
  el: 'body',
  
  data: {
    picker: 1,
    images: [
      {img_src: 'http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg'},
      {img_src: 'http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg'},
      {img_src: 'http://scr.templatemonster.com/35100/35151_gall_nature_small_3.jpg'}
    ],
    colors: [
      {id: 1, name: 'Black'},
      {id: 2, name: 'Red'},
      {id: 3, name: 'Green'}
    ]
  }
  
});

ul {
  list-style: none;
}
ul li img {
  width: 110px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<ul class="Items">
    <li v-for="image in images">
      <img v-show="+$index === +picker" :src="image.img_src" >
    </li>
  </ul>
  
  <ul class="Colors">
    <li v-for="color in colors">
      <input type="radio" name="color" value="{{$index}}" v-model="picker">
      <span>{{ color.name }}</span>
    </li>
  </ul>

Answer 2

In order to make the radio buttons functional, it is important to assign a specific value for each option. Since you intend to compare them using the $index, this should be the value assigned.

<input type="radio" name="color" value="{{$index}}" v-model="picker">

If you want to control the visibility of elements based on certain conditions, you can utilize the v-show binding:

v-show="+$index === +picker"

By using unary +, you ensure that both sides are treated as numeric values for accurate comparison.

new Vue({
  
  el: 'body',
  
  data: {
    picker: 1,
    images: [
      {img_src: 'http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg'},
      {img_src: 'http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg'},
      {img_src: 'http://scr.templatemonster.com/35100/35151_gall_nature_small_3.jpg'}
    ],
    colors: [
      {id: 1, name: 'Black'},
      {id: 2, name: 'Red'},
      {id: 3, name: 'Green'}
    ]
  }
  
});

ul {
  list-style: none;
}
ul li img {
  width: 110px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<ul class="Items">
    <li v-for="image in images">
      <img v-show="+$index === +picker" :src="image.img_src" >
    </li>
  </ul>
  
  <ul class="Colors">
    <li v-for="color in colors">
      <input type="radio" name="color" value="{{$index}}" v-model="picker">
      <span>{{ color.name }}</span>
    </li>
  </ul>

Display an image corresponding to the selected radio button option

Answer №1

Similar questions

Enhance the standard input control in Vue.js by extending it to include features such as

Customizing the default settings of a d3 funnel chart

Configure parameters for Shopware navigation path

Tips for retrieving the identifier of a row in a mui datagrid when an onClick event occurs

What is the purpose of the 'onClassExtended' function in Extjs 6 for class definition?

Ensure that selected options are unique across multiple selections

javascript mobile nav event

Featuring a visual arrangement of categorized images with AngularJS for an interactive display

Needing to utilize the provide() function individually for every service in RC4

Resetting the store variable in Vuex when changing routes

Issue arises when there are several inline <script> tags containing parameters which result in filtered JSON output

Maintaining current object relationships in the React state

Showing the precise age in years by utilizing the provided 'Date of Birth' selected from the datePicker

Tips for creating a flexible Cell component in react-big-calendar:

Enter the variable into the parameter

Trouble arises from duplicating custom SCSS code while making modifications to SaaS variables in vue.config.js

Implementing a line break within a JavaScript function specifically designed for formatting images

When using the Three.js FBX loader to add objects to the scene, the newly added objects may not be present in the children array

npm: Generating debug and production builds while ensuring accurate dependency management

Top method for showcasing animated images (HTML/CSS/JS)