[Vuejs]-Using vuejs if radio button is selected, use dropdown to replace image found in array

by

0👍

✅

Currently your :src is taking in an array with all the image names. You should first retrieve the selected value and then use it as the source, instead of the entire array.

     data: {
          imageNamesArr:['image1.jpg','dog.jpg','car.jpg'],
          selectedImage: ''
          },
   
---
<select v-model="selectedImage">
    <option v-for="img in imageNamesArr"></option>
</select>
         <img :src="selectedImage" alt="myimage" />

0👍

here src needs an exact name along with the directory path not an array of names. so you should based on your selection logic pick a name from the array and then bind it with src.

Something like this:

<div id="app">
  <h2>Todos:</h2>

  
   <select v-model="selectedOption">
                <option v-for="img in imageNamesArr">{{img}}</option>
            </select><br>

                <br>
                <div class="row">
                    <div class="col-lg-1 col-md-1 col-sm-1">
                        <input id="radbad16" type="radio" name="gender">
                    </div>
                    <div class="col-lg-11 col-md-11 col-sm-11">
          
                        <img :src="selectedOption" alt="myimage" />
                        <p class="img-caption"><a href="" target="_blank" rel="noopener">Enlarge Image + </a><br /><em>ghosted</em> by kitty carrieayll</p>
                        <p>some text can go here.</p>

                    </div>
                    </div>
                    <br>
                    <hr>
</div>

new Vue({
  el: "#app",
  data: {
  selectedOption: "",
  imageNamesArr:['image1.jpg','dog.jpg','car.jpg'],
    todos: [
      
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },
   }
  }
})```

Leave a comment