Vue.js Zufallsbild wird nicht angezeigt

Question

Jeder hat eine Idee, warum das nicht für mich funktioniert? Ich betreibe einen Vue-Cli-Build. Ich bekomme keine Fehler, aber das Bild wird nicht angezeigt. Ich bin neu bei vue.js, also ist die Lösung wahrscheinlich ziemlich einfach. Jede Hilfe wird sehr geschätzt ...

<template> 
    <section> 
    <img :src="selectedImage" /> 
    </section> 
</template> 

<script> 
export default { 
    data: { 
    images: [ 
     'http://via.placeholder.com/200x140', 
     'http://via.placeholder.com/200x100' 
    ], 
    selectedImage: '' 
    }, 
    created() { 
    const idx = Math.floor(Math.random() * this.images.length) 
    this.selectedImage = this.images[idx] 
    } 
} 
</script> 

Das ist mein main.js Datei:

import Vue from 'vue' 
import App from './App' 
import router from './router' 
import VueI18n from 'vue-i18n' 
import messages from './components/locale' 

Vue.config.productionTip = false 
Vue.use(VueI18n) 

const i18n = new VueI18n({ 
    locale: 'en', 
    messages 
}) 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App }, 
    i18n 
}) 

Answer 1

Hier data sollte eine Funktion sein, die ein Objekt zurückgibt.

<template> 
    <section> 
    <img :src="selectedImage" /> 
    </section> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     images: [ 
     'http://via.placeholder.com/200x140', 
     'http://via.placeholder.com/200x100' 
     ], 
     selectedImage: '' 
    } 
    }, 
    created() { 
    const idx = Math.floor(Math.random() * this.images.length) 
    this.selectedImage = this.images[idx] 
    } 
} 
</script> 

Hier ist eine Erklärung dafür, warum Datenfunktion sein muss: https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

Im Grunde ist es von Design diktiert wird, die data muss eine Funktion sein, die ein Objekt zurückgibt, Kreuz zu vermeiden JavaScript-Objekte verweisen.