简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
v-for dalam komponen Vue JS tidak mengeluarkan apa-apa
P粉268654873
P粉268654873 2023-09-11 22:43:19
0
1
532

V-for dalam kod di bawah nampaknya menghalang sebarang output.

Pelayar hanya memaparkan

Ia sepatutnya menunjukkan 5 baris 

Vue.component('skeleton-body', {
  props: ['lines'],
  template: `<div>
    <div v-for="n in lines" :class="lines">
      <div class="Polaris-SkeletonBodyText"></div>
    </div>
  </div>`
});

Vue.component('skeleton-display', {
  props: ['size'],
  template: `<div :class="['Polaris-SkeletonDisplayText__DisplayText', 'Polaris-SkeletonDisplayText--size--' + size]"></div>`
});

Vue.component('translation', {
  props: ['phrase', 'type', 'lines', 'size'],
  template: `<template v-if="!phrase">
    <component :is="getSkeletonComponent" :lines="lines" :size="size"></component>
  </template>
  <template v-else>
    <span>{{ phrase }}</span>
  </template>`,
  computed: {
    getSkeletonComponent() {
      if (this.type === 'body') {
        console.log (this.lines);
        return 'skeleton-body';
      }
      else if (this.type === 'display') {
        switch (this.size) {
          case 'small':
            this.size = 'Small'
            break;
          case 'medium':
          default:
            this.size = 'Medium'
            break;
          case 'large':
            this.size = 'Large'
            break;
          case 'extraLarge':
            this.size = 'ExtraLarge'
            break;
        }
        return 'skeleton-display';
      }
    }
  }
});

new Vue({
el: '#app',
data: {
language: {}
},
methods: {}
})
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@shopify/polaris@10.30.0/build/esm/styles.css">
</head>
<body>
<div id="app">
  <translation :phrase="language.test" type="body" lines="5"></translation>
</div>
</body>

P粉268654873
P粉268654873

membalas semua(1)
P粉618358260
P粉6183582602023-09-12 22:03:56 Tingkat 1

Nampaknya nilai baris dihuraikan sebagai rentetan.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！