중첩된 데이터와 v-slot이 있는 데이터 테이블 Vuetify: 항목

중첩된 데이터와 v-slot이 있는 데이터 테이블 Vuetify: 항목

중첩된 데이터로 Vuetify 테이블을 만들고 싶습니다.문제는 v-slot:item이 중첩된 데이터와 함께 작동하지 않는 것 같다는 것입니다.

이것은 제 코드입니다.https://codepen.io/blakex/pen/XWKWjaE

<v-data-table :headers="headers" :items="desserts">
  <template v-slot:item.calories="{ item }">
    <td>Slot works: {{ item.calories }}</td>
  </template>
  <template v-slot:item.nested.nestedCalories="{ item }">
    <td>Nested slot works: {{ item.nested.nestedCalories }}</td>
  </template>
</v-data-table>

data () {
  return {
    headers: [
      { text: 'Dessert', value: 'name' },
      { text: 'Calories', value: 'calories' },
      { text: 'Nested Calories', value: 'nested.nestedCalories' },
    ],
    desserts: [
      {
        name: 'Yogurt',
        calories: 100,
        nested: { nestedCalories: 100 },
      },
      ...
    ],
  }
}

보다시피v-slot:item.nested.nestedCalories동작하지 않습니다.

뭐가 없어졌는지 아는 사람?

이는 DOM 템플릿 해석 경고에서는 언급되지 않은 것으로 보이지만 HTML 태그 및 속성은 대소문자를 구분하지 않습니다.Codepen에서는 DOM을 템플릿으로 사용하고 있기 때문에v-slot:item.nested.nestedCaloriesAtribute가 소문자가 됩니다( )v-slot:item.nested.nestedcalories)에서 값을 변경한 경우headers동작하고 있는 것을 알 수 있습니다.

이를 방지하려면 항상 Vue와 함께 문자열 템플릿을 사용해야 합니다.문자열 템플릿은 다음과 같습니다.

• .vue파일
• 템플릿 옵션
• <script type="text/x-template">vuetify codepen 템플릿이 사용하는 것처럼

x-template로 작성된 코드는 다음과 같습니다.

<div id="app"></div>

<script type="text/x-template" id="app-template">
  <v-app>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    >
      <template v-slot:item.calories="{ item }">
        <td>Slot works: {{ item.calories }}</td>
      </template>
      <template v-slot:item.nested.nestedCalories="{ item }">
        <td>Nested slot works: {{ item.nested.nestedCalories }}</td>
      </template>
    </v-data-table>
  </v-app>
</script>

<script>
  const App = {
    template: '#app-template',
    data: () => ({
      headers: [
        { text: 'Dessert', value: 'name' },
        { text: 'Calories', value: 'calories' },
        { text: 'Nested Calories', value: 'nested.nestedCalories' },
      ],
      desserts: [
        {
          name: 'Yogurt',
          calories: 100,
          nested: { nestedCalories: 100 },
        },
        {
          name: 'Ice cream',
          calories: 200,
          nested: { nestedCalories: 200 },
        },
        {
          name: 'Eclair',
          calories: 300,
          nested: { nestedCalories: 300 },
        },
      ],
    })
  }


  new Vue({
    vuetify: new Vuetify(),
    render: h => h(App)
  }).$mount('#app')
</script>

언급URL : https://stackoverflow.com/questions/64241600/vuetify-data-table-with-nested-data-and-v-slotitem