javascript - Vue.js 2 在一个单文件组件中定义多个属性

Question

我正在做一个 Laravel 5.5 和 Vue.js 2.x 项目，经过几次深入的搜索和问题后，我来到了组件。但是当页面呈现时我仍然有一条警告消息:

[Vue warn]: Property or method "trimestral" 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. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in < Root >)

我在 Vue 文件中有以下单文件组件:FormExpenses.vue:

<template>
    <div class="input-group">
        <input class="form-control" type="number" min="0" name="expenses" id="expenses" v-model="expenses">
        <div class="input-group-btn">
            <select class="form-control" name="expenses_range" id="expenses_range" v-model="expensesRange" :disabled="expenses < 1">
                <option value="" disabled="">Elija el rango de expensas</option>
                <option value="mensual">Mensual</option>
                <option value="trimestral">Trimestral</option>
                <option value="cuatrimestral">Cuatrimestral</option>
                <option value="semestral">Semestral</option>
                <option value="anual">Anual</option>
            </select>
        </div>
    </div>
</template>
<script>
    module.exports = {
        props: {
            amount: {
                type: Number,
                default: 0
            },
            range: {
                type: String,
                default: '',
            }
        },
        data: function() {
            return {
                expenses: this.amount,
                expensesRange: this.range,
            }
        },
    }
</script>

我已经“正确”注册了组件，因为某些数据似乎有效。这是在 Vue 实例文件中。此外，我已经定义了以下元素，它似乎以以下形式呈现:

<expenses-form 
        :amount="@if(old('expenses')) {{ old('expenses') }}@elseif(isset($property) && $property->expenses) {{ $property->expenses }}@endif"
        :range="@if(old('expenses_range')) {{ old('expenses_range') }}@elseif(isset($property) && $property->expenses_range) {{ $property->expenses_range }}@endif"
        ></expenses-form>

这似乎有效，因为它在渲染时显示以下内容:

正如所见，尽管根据 Vue.js documentatiob，第一个字段正在使用它们的函数和数据呈现，但不是第二个字段。好像没问题。

如有任何意见，我们将不胜感激。

Answer 1

Vue 期望 range 是一个字符串，但是您正在使用 v-bind(:range 并且 Vue 将 trimestral 视为变量，未定义)，在传递 Prop 时，使用 range="" 而不是 :range="..."。

您可以在此处的文档中阅读更多内容:https://v2.vuejs.org/v2/guide/components.html#Literal-vs-Dynamic