Discussion :

[mohsenuss91]

Bonjour,
svp comment faire pour rendre ça dynamique:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 <div class="unit row">
      <Sequence />
      <Sequence />
      <Sequence />
      <Sequence />
    </div>

j'ai essayé avec :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<v-for"seq in maxSeq" Sequence />

mais ça marche pas!

Sachant que le composant Unit.vue est:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
  <div>
    <h3>UNIT title</h3>
    <div class="unit row">
      <v-for"seq in maxSeq" Sequence />
    </div>
    <hr>
  </div>
</template>
 
<script>
import Sequence from '../components/Sequence.vue'
const units = [
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
]
export default {
  name: 'Unit',
  components: {
    Sequence
  },
  props: {
    title: {
      type: String,
      default: ' '
    },
    maxSeq: {
      type: Number,
      default: 6
    }
  },
  data () {
    return units
  }
}
</script>
 
<style>
.unit {
  align-content: center;
}
 
h3 {
  align-content: right;
  color: red;
}
</style>

et le composant Sequence.vue.js:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
  <div class="sequence card border-primary col-md">
    <div class="card-header">
      {{ title }}
    </div>
    <img
        :src="require(`@/static/images/${img}`)"
        :alt="img"
        width="100px"
        height="100px"
      >
    <div class="card-body">
      <p class="card-text">
        {{ lib }}
      </p>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Sequence',
  props: {
    id: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: 'وحدة تعلمية'
    },
    img: {
      type: String,
      default: 'unit01.png'
    },
    lib: {
      type: String,
      default:
        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam iste aliquam voluptatum'
    }
  }
}
</script>
 
<style>
.sequence {
  margin: 15px;
  align-content: center;
}
</style>

[gwyohm]

v-for est une directive, pas un composant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<Sequence v-for="seq in maxSeq" :key="seq"></Sequence>