동적 ID를 v-for loop + 문자열의 필드와 연결하는 방법은 무엇입니까?

동적 ID를 v-for loop + 문자열의 필드와 연결하는 방법은 무엇입니까?

템플릿에 다음과 같은 v-for 루프가 있습니다.

<th v-for="(field, key) in lists[$route.params.model][$route.params.status].fields"
                        :key="key">
                        <div class="columnName">{{ field }}</div>
                        <div class="arrows">
                            <div class="arrow-up-icon" @click="getSearchResult(1, query, statusesIds,
                                lists[$route.params.model][$route.params.status].values[key], 'desc')"></div>
                            <div :id="here should me dynamic id" class="arrow-down-icon" @click="getSearchResult(1, query, statusesIds,
                                 lists[$route.params.model][$route.params.status].values[key], 'asc')"></div>
                        </div>
                    </th>

여기서의 문제는, 다이나믹 ID(루프의 각 버튼에 대해서)에, 다음과 같이 하는 것입니다.:id="order_by"+{param}<--이것은 루프 + {{key}}<--- 이것도 루프의 것입니다.하지만 나는 이것을 직장에 쓸 수 없다.동적 아이디라고 할 수 없습니다.내 임시직에서 이 작업을 수행할 수 있습니까?

템플릿 {{prop}}을(를) 사용할 필요는 없습니다.단, 플레인 JavaScript 문자열 연결을 사용하면 됩니다.

    <th v-for="(field, key) in lists[$route.params.model][$route.params.status].fields"
         :id="'order_by' + field"
         :key="key"
    >
                      
    </th>

JavaScript 식 사용

각 행에 대한 템플릿을 작성하여 행을 생성하는 경우.그럼 이게 해결책인 것 같아요.

  <TradeTableItem
    v-for="(debtReserve, index) in debtReserves"
    :key="debtReserve.id"
    :debtReserve="debtReserve"
    :market="market"
    :id="'reserve' + index"
  ></TradeTableItem>

위 단계에서는, 우리는 그 정보를 생성했다.id각각에 대해서row.

그리고 TradeTableItem(표 행을 채우는 템플릿)에서 Write(쓰기)id~하듯이:id="this.id"어디에this.id소품의 일부입니다.

도움이 되었으면 좋겠다

언급URL : https://stackoverflow.com/questions/47119588/vue-how-to-concat-dynamic-id-with-field-from-v-for-loop-string