Vue 컴포넌트 템플릿의 요소 속성에 문자열과 변수를 조합

Vue 컴포넌트 템플릿의 요소 속성에 문자열과 변수를 조합

고객 1명 또는 고객 2명이 있는 폼을 가지고 있습니다.카운트를 선택하기 위한 컴포넌트와 클라이언트 정보 폼을 표시하기 위한 컴포넌트를 작성했습니다(클라이언트가 2개인 경우 v-for가 2개인 경우).

<div id="root">
   <count-section></count-section> // also emits the client count
   <infos
      v-for="(count, index) in total"
      :key="index"
      v-bind:index="count">
   </infos>
</div>

소품을 세팅하고 나서, 나는 그 소품을 잡을 수 있었다.count내 컴포넌트에 있습니다.

innerhtml에서는 다음 기능이 작동합니다.

<h5>Person {{ count }} Info</h5>

그리고 문자열을 조합한 속성을 생성하려고 했는데 오류가 발생했습니다.

<input name="name-client-{{count}}"

name="name-client-{count}}: 내부 특성이 제거되었습니다.대신 v-bind 또는 콜론 약어를 사용하십시오.예를 들어, 대신 을 사용합니다.

그것을 실현하는 적절한 방법은 무엇입니까?내가 흐름을 잘못 생각했나?name-client-1과 name-client-2를 같은 구조의 다른 모든 필드의 묶음으로 만들고 백엔드에서 for-loop을 사용하려고 했습니다.

ES6 템플릿 문자열 사용:name="`name-client-${count}`".

언급URL : https://stackoverflow.com/questions/45451858/combining-string-variable-in-element-attribute-in-vue-component-template