Externe Funktion »dice«#

Datei zufall.js mit der Funktion »dice«#

Die Methode dice ist definiert, soll nun aber für eine mögliche Wiederverwendung in anderen Projekten vorbereitet werden.

Um die Funktion für andere Zahlenbereiche flexibel zu halten, wurde die Funktion parmeterisiert (Beachte die geänderte Signatur)

Hier der ausgelagerte Code: zufall.js:

 1export function dice(min, max, anzahl) {
 2  let neueZahlen = []
 3  do {
 4    var x = Math.floor(Math.random() * (max - min + 1))
 5    if (neueZahlen.indexOf(x) < 0) {
 6      neueZahlen.push(x)
 7    }
 8  } while (neueZahlen.length <= anzahl)
 9    console.log(neueZahlen)
10    return neueZahlen
11}

Import und Verwendung#

Der komlette script-Block mit allen Neuerungen.

 1<script>
 2
 3import { dice } from '../utils/zufall.js';
 4
 5export default {
 6    name: 'Lotto',
 7    data() {
 8	return {
 9	    headline: 'Ziehung (Version IV)',
10	    msg: 'Wird das der grosse Gewinn?',
11	    anzahl: 6,
12	    min: 1,
13	    max: 49,
14	    zahlen: [1,2,3,4,5,6]
15	}
16    },
17    methods: {	
18	ziehung() {
19	    this.zahlen = dice(this.min, this.max, this.anzahl)
20	}
21    }
22}
23</script>
24
25 <template>
26  <div>
27    <h1>{{ this.headline }}</h1>
28    <h2>{{ this.msg }}</h2>
29    <ul>
30      <span v-for="item in this.zahlen"
31          class="dib pa3">
32    {{ item }} , 
33      </span>
34    </ul>
35    <button @click="this.ziehung()"> Neuer Wurf</button>
36    <p style="padding:5px">
37    </p>
38    <hr/>
39    Debug-Ausgaben
40
41    <hr/>	
42    <p>Ein einzelner Werte mit der Punktnotation</p>
43    <p> max: {{ this.max }} (this.max)</p>
44  </div>
45</template>
46