Vue.js 임의의 이미지가 표시되지 않음

Question

왜이 기능이 저에게 효과적이지 않습니까? 나는 vue-cli 빌드를 실행 중입니다. 오류는 없지만 이미지가 표시되지 않습니다. 저는 vue.js를 처음 사용하기 때문에 솔루션이 가장 단순합니다. 어떤 도움을 크게 ... 감사합니다

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

이 내 main.js 파일입니다

여기

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

data 객체를 반환하는 함수이어야한다. https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

기본적으로,이 data 자바 스크립트 객체를 참조하는 십자가를 방지하기 위해 개체를 반환하는 함수이어야 디자인에 의해 결정됩니다 : 데이터가 기능해야하는 이유

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

여기에 대한 설명입니다.