using vuejs if radio button is selected, use dropdown to replace image found in array

I am using vuejs and I want to change the image that is currently showing on the page to whatever is selected from the menu. The array has a list of images and if the radio button is selected, then an image is selected, I want the url to update. I add :src but no luck what else is missing.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>

  
   <select>
                <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="imageNamesArr" 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>

Answer

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" />

Advertisement

Answer