for문 안에서 img src 데이터 바인딩

[박땡땡]

<template>
  <div class="menu">
    <a href="#none" v-for="(link, i) in menus" :key="i"> {{ link }} </a>
  </div>
  <img src="./assets/logo.png">

  <div v-for="(local, i) in products" :key="i">
    <img  :src="imgSrc" alt="">
    <h4>{{ local }}</h4>
    <p> {{ priceArray[i] }} 만원</p>
    <button @click="increase(i)">허위매물신고</button> <span>신고수: {{ reportCount[i] }}</span>
  </div>

</template>

<script>

export default {
  name: 'App',
  data(i){
    return {
      menus: ['HOME', 'SHOP', 'ABOUT'],
      products: ['역삼동원룸', '천호동원룸', '마포구원룸'],
      priceArray: [50, 70, 20],
      reportCount: [0,0,0],
      imgSrc: ./assets/room${i}.jpg
    }
  },
  methods : {
    increase(i) {
      this.reportCount[i] += 1;
    },
  },
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.menu {
  background : darkslateblue;
  padding : 15px;
  border-radius : 5px;
}
.menu a {
  color : white;
  padding : 10px;
}
</style>

 

 

 

저는 이렇게 작성했는데 문법 에러는 나지 않지만

실서버에 하얀 화면만 뜨네요 ㅠㅠ

 

v-for문 안에서 img src를 동적으로 구현하고 싶은데 어떻게 해야 할까요 ㅠㅠ?

여러 방법을 찾아봣는데.. ㅠㅠ 잘 모르겠습니다.

 

 

[codingapple]

<img  :src=" './assets/room' + i + '.jpg' ">

data안에는 백틱 넣으면 안될듯요 

 

[박땡땡]

선생님이 말씀해주신 대로 경로를 바꿨으나 이미지 경로 404가 뜹니다 ㅠㅠ

 

경로에서 assets가 두번씩 찍히는데요.. ㅠ

[박땡땡]

선생님 모달창 닫기버튼도 만들었는데요!

만약 모달창 백그라운드(검은레이어)만 눌렀을 때만 닫히게 하고 싶으면 어떻게 할까요?

이벤트버블링 때문인 것 같아서요

@click.stop="" 을 찾아서 써봤는데도 닫히더라구용 ㅎㅎㅎ ㅠㅠㅠ

<div class="black-bg" v-if="modalState == true" @click="modalState = false">
<div class="white-bg">
<h4>상세페이지</h4>
<p>상세페이지내용임</p>
<button @click="modalState = false">닫기</button>
</div>
</div>

[codingapple]

<img :src="require('./assets/room0.jpg')">

이렇게 써봅시다

.stop은 .stop 붙은 요소의 윗 div로 이벤트가 퍼지는걸 막아줍니다 

검은배경눌렀을 때 e.target과 e.currentTarget이 같으면 닫아달라고 코드를 짭시다 

 

 

[글쓴이]

글