Vue.js 属性 或方法 "options" 未在实例上定义但在渲染期间被引用

Question

我使用 Vue.js（和 Inertia.js），我想在我的表单中构建一个 select，但是编译后我的 select 是空的并且开发控制台在网络浏览器中抛出这个错误：

属性 或方法“选项”未在实例上定义，但在渲染期间被引用。通过初始化 属性

确保此 属性 是反应性的，无论是在数据选项中，还是对于基于 class 的组件

请让我向您展示我获得帮助的代码 - 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: '&#36; USD', value: 'usd' },
                      { text: 'R ZAR', value: 'zar' },
                      { text: '&#8364; EUR', value: 'eur' },
                      { text: '&#163; GBP', value: 'gbp' },
                      { text: '&#8377; INR', value: 'inr' },
                      { text: '&#36; 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>

Answer 1

在你的 v-for 循环中，VueJS 试图在你的数据对象中找到 options 键。您的选项在 investmentForm 键下，所以在您的 v-for 中，而不是

v-for="option in options"

你应该写

v-for="option in investmentForm.options"

你得到的错误只是意味着 Vue 不知道 options 是什么，因为它无法在任何地方找到它。

Answer 2

options 在 investmentForm 数据中，所以你需要更新这个

  <option v-for="option in investmentForm.options" v-bind:value="option.value">
      {{ option.text }}
 </option>

Answer 3

options 位于 investmentForm 中，因此必须像这样在模板中调用它 investmentForm.options。

已经给出的解决方案的替代方法是添加一个计算方法，这样您就不需要更改模板：

// ...

computed: {
    options() {
        return investmentForm.options;
    }
},

// ...