I working with Vue.js (and Inertia.js) and I want to build an select in my form, but my select after compiling is empty and dev console in web browser throwings me this error:
Property or method "options" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
Please, let me to show you my code for getting help - Index.vue:
<template>
<app-layout>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<div>
<div class="p-6 sm:px-20 bg-white border-b border-gray-200">
<div class="flex items-center justify-end mt-4">
<jet-application-logo class="block h-12 w-auto items-center mx-auto" />
</div>
<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<jet-form-section @submitted="createInvestment">
<template #title>
Investment gateway
</template>
<template #form>
<div class="mx-auto text-center">
<jet-input-amount id="amount" type="number" name="amount" placeholder="Amount for invest" v-model="investmentForm.amount" />
<jet-input-error :message="investmentForm.error('amount')" class="mt-2" />
<select v-model="currency" name="currency" class="input-currency">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
<div class="mx-auto text-center">
<jet-input id="card_number" type="email" name="card_number" placeholder="Card Number" v-model="investmentForm.paypal" />
<jet-input-error :message="investmentForm.error('card_number')" class="mt-2" />
</div>
<div class="mx-auto text-center nomad-slash">
<jet-input-card id="card_expiration_month" type="email" name="card_expiration_month" placeholder="MM" v-model="investmentForm.paypal" />
<jet-input-error :message="investmentForm.error('card_expiration_month')" class="mt-2" />
/
<jet-input-card id="card_expiration_year" type="email" name="card_expiration_year" placeholder="YY" v-model="investmentForm.paypal" />
<jet-input-error :message="investmentForm.error('card_expiration_year')" class="mt-2" />
<jet-input-card id="card_cvv" type="email" name="card_cvv" placeholder="CVV" v-model="investmentForm.paypal" />
<jet-input-error :message="investmentForm.error('card_cvv')" class="mt-2" />
</div>
</template>
<template #actions>
<jet-action-message :on="investmentForm.recentlySuccessful" class="mr-3">
Your money are on the way!
</jet-action-message>
<jet-button :class="{ 'opacity-25': investmentForm.processing }" :disabled="investmentForm.processing">
Invest
</jet-button>
<br /><br />
</template>
</jet-form-section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</app-layout>
</template>
<script>
import JetActionMessage from './../../Jetstream/ActionMessage'
import JetFormSection from './../../Jetstream/FormSection'
import JetButton from './../../Jetstream/Button'
import JetInput from './../../Jetstream/Input'
import JetInputAmount from './../../Jetstream/InputAmount'
import JetInputCard from './../../Jetstream/InputCard'
import JetLabel from './../../Jetstream/Label'
import JetInputError from './../../Jetstream/InputError'
import JetApplicationLogo from './../../Jetstream/ApplicationLogo'
import AppLayout from "./../../Layouts/AppLayout";
export default {
name: "Index",
components: {AppLayout, JetInput, JetLabel, JetFormSection, JetButton, JetActionMessage, JetInputError, JetApplicationLogo, JetInputAmount, JetInputCard},
data() {
return {
investmentForm: this.$inertia.form({
amount: '',
currency: '',
options: [
{ text: '$ USD', value: 'usd' },
{ text: 'R ZAR', value: 'zar' },
{ text: '€ EUR', value: 'eur' },
{ text: '£ GBP', value: 'gbp' },
{ text: '₹ INR', value: 'inr' },
{ text: '$ AUD', value: 'aud' },
],
card_number: '',
card_expiration_month: '',
card_expiration_year: '',
card_cvv: '',
}, {
bag: 'createInvestment',
resetOnSuccess: false,
}),
}
},
methods: {
createInvestment() {
this.investmentForm.post('/input/create', {
preserveScroll: true,
});
}
}
}
</script>
<style scoped>
</style>