[vueJS] 링크 사이 데이터 바인딩

vue에서는 {{ mustached }}를 사용해서 값 또는 함수를 불러왔음
그런데 img src안에 바인딩을 하고싶을떄, 또는 a태그의 href속성에 vue내 선언된 값을 넣고싶다면 어떻게 하면 될까.

결론부터 말하자면 href속성이나 src안에는 {{ mustached }}를 사용할 수 없음.

그래서 v-bind디렉티브가 있음.

ex)

<a :href="news.url">{{ news.title }}</a>
<a v-bind:href="news.url">{{ news.title }}</a>

<router-link :to="`/item/${news.id}`">{{ news.title }}</router-link>
<router-link v-bind:to="`/item/${news.id}`">{{ news.title }}</router-link>

<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>

herf는 위처럼 하면 동작하지만 a태그의 src는 동작하지 않음.

<div v-for="(item, index) in menus" :key="(item, index)">
  <img v-bind:src= "`./assets/room${index}.jpg`" />
    <h4>{{products[index]}}</h4>
	<p>50만원</p>
	<button @click="신고수[index]++">허위매물신고</button>
	<span>신고수 : {{신고수[index]}}</span>
</div>

위 같은 예제는


이렇게 이미지가 깨져서 나오게 되는데, 개발자도구로 확인해보면 값은 잘 바인딩 되어 있긴 함 ㅜ
근데 안되는 이유는,
바로 img src에 저장된 값이 단순 string이기 때문

이를 해결하기 위해 해당 경로를 import한다는 의미로 require를 사용해줘야 함

<img v-bind:src= "require(`./assets/room${index}.jpg`)" />

그래서 위 처럼 사용하면 해결~!
+) 특별한 점은 주소("")를 모두 require로 감싸지 않는다는것! 오히려 콤마로 바인딩 된 주소를 모두 감싼다.

result)

잘 나옴 ㅎㅎ

📎 참고

https://heewon26.tistory.com/102
https://bangj.tistory.com/135
https://hwd3527.github.io/vue/2020/04/12/vue-content.html