Estoy tratando de aprender javascript y Vue.js. Estaba siguiendo la documentación en el sitio de Vue y modificando sus demostraciones como ejercicio. Quería cambiar su ejemplo de directiva de bucle para agregar dinámicamente imágenes a la lista desde una URL específica. Parece que no puedo mostrar la imagen a pesar de configurar el campo src de propiedades de imagen. He verificado que todo funciona y que, de hecho, el campo se está configurando. Supongo que debo estar malinterpretando algo relacionado con el DOM o el orden de los eventos.
Gracias por adelantado.
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')Cuando use v-for , asegúrese de agregar :key . Documentos
También preste atención a sus elementos html. <img> & <input> .
También devuelve el resultado de .map() a this.todos . Documentos
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>intente ejecutar este fragmento y haga clic en "Haga clic para establecer la imagen"
try this. <div id="list-rendering" class="demo"> <input v-model="imgsrc"></input> <button v-on:click="setImage"> Set</button> <ol> <li v-for="(todo, index) in todos :key="index""> {{ todo.text }} <img :src="todo.image"/> </li> </ol> </div>