2

I have 2 views for adding data to a database, one for songs and one for genres. However, I want to populate the input fields with random data, but I don't know why importing chance in genres, but not in songs, makes songs working, but not genres page.

Genre View:

<template>
  <div>
    <input type="text" id="genre-name" placeholder="Name" v-model="name" /><br />
    <input type="text" id="genre-country" placeholder="Country" v-model="country" /><br />
    <input type="text" id="genre-year" placeholder="Year" v-model="year" /><br />
    <button @click="addGenre" id="genre-button">Add Genre</button>
  </div>
</template>

<script>
import { requestOptions, base_url } from '@/utils/requestOptions';
//var chance = require('chance').Chance(); this works for both, when importing only in one file
import {chance} from "chance"; //<= this is the line I am talking about
export default {
  data() {
    return {
      name: chance.radio(),
      country: chance.country({ full: true }),
      year: chance.year()
    }
  },
  methods: {
    addGenre() {
      //...
    }
  }
}
</script>

Song View:

<template>
  <div>
    <input type="text" id="name" placeholder="Name" v-model="name" /><br />
    <input type="text" id="author" placeholder="Author" v-model="author" /><br />
    <input type="text" id="country" placeholder="Country" v-model="country" /><br />
    <input type="text" id="duration" placeholder="Duration" v-model="duration" /><br />
    <input type="text" id="views" placeholder="Views" v-model="views" /><br />
    <input type="text" id="genre" placeholder="Genre" v-model="genre" /><br />
    <button @click="addSong">Add Song</button>
  </div>
</template>

<script>
import { requestOptions, base_url } from '@/utils/requestOptions';
//this is working without importing chance
export default {
  data() {
    return {
      name: chance.word(),
      author: chance.last(),
      country: chance.country({ full: true }),
      duration: chance.minute(),
      views: chance.integer({ min: 0, max: 100000000 }),
      genre: chance.radio()
    }
  },
  methods: {
    addSong() {
      //...
    }
  }
}
</script>

The error message I am getting when I am opening the Genre View is:

TypeError: undefined is not an object (evaluating 'chance__WEBPACK_IMPORTED_MODULE_1__.chance.radio')

So I want to know why is it working on the Song View?
If I delete the import line, it will not work in any view.

kissu
  • 40,416
  • 14
  • 65
  • 133
Foreastbtch
  • 65
  • 5

1 Answers1

0

I have been struggling for a solution myself. I found the solution below that works for me:

import Chance from "chance";
var chance = new Chance();

chance.string({
  pool: "abcdefghijklmnopqrstuvwxyz1234567890",
  length: 5
});
hyphestos
  • 61
  • 1
  • 5