Vue.js 属性或方法“选项”未在实例上定义，但在渲染期间被引用

Posted 2023-02-22

【中文标题】Vue.js 属性或方法“选项”未在实例上定义，但在渲染期间被引用

【英文标题】：Vue.js Property or method "options" is not defined on the instance but referenced during render

【发布时间】：2021-02-09 13:08:55

【问题描述】：

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

属性或方法“选项”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

请让我向您展示我的获取帮助的代码 - 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>

【参考方案1】：

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

v-for="option in options"

你应该写

v-for="option in investmentForm.options"

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

【参考方案2】：

options 在 investmentForm 数据内，因此您需要更新它

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

【参考方案3】：

options 在investForm 中，因此必须在模板中调用它，例如investForm.options。

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

// ...

computed: 
    options() 
        return investmentForm.options;
    
,

// ...