I'm facing a dilemma with my database entry views - one for songs and the other for genres. While trying to automatically fill input fields with random data, I noticed an issue when importing chance. It seems that importing chance in the genres file but not in the songs file causes the songs page to work fine, but the genres page fails.
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.