반응형
속성 내부 보간을 해결하는 방법이 제거되었습니다. v-bind 또는 콜론 속기 사용? Vue.JS 2
내 vue 구성 요소는 다음과 같습니다.
<template>
<div>
<div class="panel-group" v-for="item in list">
...
<div class="panel-body">
<a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
Show
</a>
</div>
<div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
...
</div>
</div>
</div>
</template>
<script>
export default {
...
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
</script>
실행되면 다음과 같은 오류가 있습니다.
Vue 템플릿 구문 오류 :
id = "purchase-{{item.id}}": 속성 내부 보간이 제거되었습니다. 대신 v-bind 또는 콜론 속기를 사용하십시오.
어떻게 해결할 수 있습니까?
내부에서 자바 스크립트 코드 v-bind
(또는 바로 가기 ":")를 사용합니다.
:href="'#purchase-' + item.id"
과
:id="'purchase-' + item.id"
또는 ES6 +를 사용하는 경우 :
:id="`purchase-${item.id}`"
src / assets 폴더에서 개체와 이미지에서 데이터를 가져 오는 경우 아래와 같이 개체에 require ( 'assets / path / image.jpeg') 를 포함해야합니다.
작업 예 :
people: [
{
name: "Name",
description: "Your Description.",
closeup: require("../assets/something/absolute-black/image.jpeg"),
},
v-img 요소에 없음- 작동하지 않음
<v-img :src="require(people.closeup)"></v-img>
v-bind 또는 바로 가기 구문 ':'을 사용하여 속성을 바인딩합니다. 예:
<input v-bind:placeholder="title">
<input :placeholder="title">
반응형
'Development Tip' 카테고리의 다른 글
Python 처리 socket.error : [Errno 104] 피어에서 연결 재설정 (0) | 2020.11.17 |
---|---|
Ionic / Cordova 앱에서 인증 (0) | 2020.11.17 |
Flutter에서 "젖빛 유리"효과를 어떻게하나요? (0) | 2020.11.17 |
직렬화에는 숨겨진 필드가 포함되지 않습니다. (0) | 2020.11.17 |
C #에서 .ToString과 "as string"의 차이점 (0) | 2020.11.17 |