[FIXED] How to dynamically set an Image object src in javascript and Vue

Issue

I'm trying to teach myself javascript and Vue.js. I was following the documentation on Vue's site and modifying their demonstrations as an exercise. I wanted to change their looping directive example to dynamically add images to the list from a specified url. I can't seem to get the image to show despite setting the image properties src field. I have verified that everything runs and the field is in fact getting set. I assume I must be misunderstanding something related to the DOM or ordering of events.

Thanks in advance.

HTML

<script src="https://unpkg.com/vue@next"></script>

<div id="list-rendering" class="demo">
  <input v-model="imgsrc"></input>
  <button v-on:click="setImage">  Set</button>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }} {{todo.image}}
    </li>
  </ol>
</div>

CSS

.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}

Javascript

const ListRenderingApp = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript',
          image: new Image(16,16)},
        { text: 'Learn Vue',
          image: new Image(16, 16)},
        { text: 'Build something awesome',
          image: new Image(16, 16)}
      ],
      imgsrc: ""
    }
  },
  methods:{
    setImage(){
       this.todos.map(todo => todo.image.src = this.imgsrc)
    }
  }
}

Vue.createApp(ListRenderingApp).mount('#list-rendering')

Solution

When using v-for make sure to add :key. Docs

Also pay attention to your html elements. <img> & <input>.

Also return the result of .map() to this.todos. Docs

new Vue({
  el: "#app",
  data: {
    imgSrc: 'https://via.placeholder.com/150/FF0000',
    todos: [
      { text: "Learn JavaScript", image: 'https://via.placeholder.com/150/0000FF' },
      { text: "Learn Vue", image: 'https://via.placeholder.com/150/0000FF' },
      { text: "Play around in JSFiddle", image: 'https://via.placeholder.com/150/0000FF' },
      { text: "Build something awesome", image: 'https://via.placeholder.com/150/0000FF' }
    ]
  },
  methods: {
    setImage: function(todo){
        this.todos = this.todos.map(todo => ({ ...todo, image: this.imgSrc }))
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <small>image url</small>
    <input v-model="imgSrc" />
  </div>
  <br />
  <div>
    <button @click="setImage()">
      Click to set Image
    </button>
  </div>
  <ol>
    <li v-for="(todo, i) in todos" :key="i">
      <label>
          {{ todo.text }}
      </label>
      <img :src="todo.image" alt="img" width="100" height="100">
    </li>
  </ol>
</div>

try running this snippet & click the "Click to set Image"

Answered By - Evan

Answer Checked By - Katrina (PHPFixing Volunteer)