v-slot 프로펠러를 사용하는 경우 템플릿 조건

v-slot 프로펠러를 사용하는 경우 템플릿 조건

다음과 같은 이름 있는 슬롯을 활성화하기 위한 조건을 설정하려고 합니다.

<template v-slot:item="{ item }" v-if="item.loading">
  <v-progress-circular indeterminate color="primary"></v-progress-circular>
</template>

사용 예는 Vuetify 데이터 테이블입니다.각 항목에는 "로드" 속성이 있으며, 행이 로드되는 경우에만 "항목" 슬롯을 활성화하고 싶습니다.("항목" 슬롯은 행의 기본 렌더링을 대체하기 위한 슬롯입니다.)

오류는 입니다.item에 정의되어 있지 않다.v-if로직처럼 보이는 항목: 항목은 다음에 대해서만 정의됩니다.templatechildren 태그.

이 문제를 해결할 방법이 있나요?

계산된 속성을 사용하여 데이터 테이블에 전달하는 항목을 필터링할 수 있습니다.

로딩에 따라 요소를 교환하지 않을 수 있습니까?

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    items: [{data : "", loading: true}, {data : "Some data", loading: false}]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="item in items">
    <div>
      <div v-if="item.loading">
        Loading...
      </div>
      <div v-else>
        {{item.data}}
      </div>
    </div>

  </div>
</div>

비슷한 문제가 있어 VUetify 2에서 VDataTable/Row를 'v-data-table-row'로 Import하여 '일반' 테이블 행을 렌더링하고 커스텀 행은 자체 템플릿을 사용하여 해결했습니다.

자바스크립트

    import Row from 'vuetify/lib/components/VDataTable/Row.js';

    export default {
        components: { 'v-data-table-row': Row },
        data() {
            return {
                currentItemName: 'Ice cream sandwich'
            }
        }
         // headers, items, etc...
    }

HTML

    <template v-slot:item="{ item }">
      <tr v-if="item.name == currentItemName" class="blue-grey lighten-4">
        <td>Custom prefix - {{ item.name }}</td>
        <td colspan="2">{{ item.calories }} - Custom suffix</td>
      </tr>
      <v-data-table-row v-else :headers="headers" :item="item">
        <template
          v-for="(index, name) in $scopedSlots"
          v-slot:[name.substr(5)]="data"
        >
          <slot
            v-if="name.substr(0, 5) === 'item.'"
            :name="name"
            v-bind="data"
          ></slot>
        </template>
      </v-data-table-row> </template

여기서 작업 예를 확인할 수 있습니다.

그냥 이렇게 하면 돼요.v-if아이 엘리먼저

<template #item="{ item }">
    <v-progress-circular
        v-if="item.loading"
        color="primary"
        indeterminate
    ></v-progress-circular>
</template>

언급URL : https://stackoverflow.com/questions/58623325/condition-on-template-with-v-if-using-v-slot-prop