"Interpolation inside attribute is removed"를 해결하려면 어떻게 해야 합니까?v-bind 또는 colon sermark를 사용하시겠습니까?"Vue.js 2

"Interpolation inside attribute is removed"를 해결하려면 어떻게 해야 합니까?v-bind 또는 colon sermark를 사용하시겠습니까?"Vue.js 2

Vue.js 컴포넌트는 다음과 같습니다.

    <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 ="syslog-{item.id }}: 내부 특성이 제거되었습니다.대신 v-bind 또는 콜론 약어를 사용하십시오.

어떻게 하면 해결할 수 있을까요?

내부에서 JavaScript 코드 사용v-bind(또는 바로 가기 ":"):

:href="'#purchase-' + item.id"

그리고.

:id="'purchase-' + item.id"

또는 ES6 이후를 사용하는 경우:

:id="`purchase-${item.id}`"

객체 배열에서 데이터를 가져올 경우 require('assets/path/image)를 포함해야 합니다.jpeg')는 아래 그림과 같이 오브젝트에서 사용됩니다.

작업 예:

people: [
  {
    name: "Name",
    description: "Your Description.",
    closeup: require("../assets/something/absolute-black/image.jpeg"),
  },

v-img 요소에서 require(objectName.propName.urlPath)를 사용하는 것이 작동하지 않았습니다.

<v-img :src="require(people.closeup.urlPath)"></v-img>

v-bind 또는 바로 가기 구문 ':'를 사용하여 특성을 바인딩합니다.예:

<input v-bind:placeholder="title">
<input :placeholder="title">

그냥 사용하다

:src="`img/profile/${item.photo}`"

가장 쉬운 방법은 파일 주소를 너무 많이 요구하는 것입니다.

<img v-bind:src="require('../image-address/' + image_name)" />

다음의 완전한 예는, ../assets/logo 를 나타내고 있습니다.png:

<template>
    <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
  export default {
    name: "component_name",
    data: function() {
      return {
        img: "logo.png"
      };
    }
  };
</script>

가장 우아한 솔루션은 이미지를 웹 팩 외부에 저장하는 것입니다.기본적으로 웹 팩은 이미지를 Base64로 압축하기 때문에 자산 폴더에 이미지를 저장해도 웹 팩은 이미지를 Base64로 압축하기 때문에 작동하지 않습니다.

문제를 해결하려면 이미지를 공용 경로에 저장해야 합니다.일반적으로 공용 경로는 "public" 폴더 또는 "statics"에 있습니다.

마지막으로 다음 작업을 수행할 수 있습니다.

data(){
  return {
    image: 1,
    publicPath: process.env.BASE_URL
  }
}

HTML을 사용하면 다음과 같이 할 수 있습니다.

<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">

공용 폴더 사용 시기

• 빌드 출력에 특정 이름의 파일이 필요합니다.
• 파일은 실행 시간이 변경될 수 있는 반응 변수에 의존합니다.
• 이미지가 있어 동적으로 경로를 참조해야 합니다.
• 일부 라이브러리는 Webpack과 호환되지 않을 수 있으며 <script> 태그로 포함하는 것 외에 다른 옵션이 없습니다.

상세정보 : "HTML 및 정적 자산"에 대한 자세한 내용은 Vue.js 매뉴얼을 참조하십시오.

언급URL : https://stackoverflow.com/questions/43211760/how-can-i-solve-interpolation-inside-attributes-has-been-removed-use-v-bind-or