Javascript Vue.js 2在单个文件组件中定义了多个属性

我正在从事一个Laravel5.5&Vue.js2.x项目，在对组件进行了几次深入的搜索和提问之后。但是当页面呈现时，我仍然有一条警告消息：

[Vue warn]：属性或方法“trimestral”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。请参阅：

（可在中找到）

我在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>

Elija el rango de expensas
量纲的
三角形
反丁烯雌酚
塞梅斯特拉尔
肛门的
module.exports={
道具：{
金额：{
类型：数字，
默认值：0
},
范围：{
类型：字符串，
默认值：“”，
}
},
数据：函数（）{
返回{
费用：这个金额，
费用范围：这个范围，
}
},
}

我已经“正确”注册了组件，因为一些数据似乎可以正常工作。这在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希望

范围

是字符串，但您在传递道具时使用的是v-bind（

:range

，Vue将

trimestral

视为变量，未定义），而不是

：range=“…”

使用

范围=“”

---

您可以在这里的文档中阅读更多信息：

但是为什么

：amount

被视为有效而

：range

不有效？如果两个都是传递属性…使用v-bind时，可以传递更多变量类型，例如：

：amount=“9”

被视为一个数字，

amount=“9”

被视为一个字符串，在您的情况下，您在组件声明中将amount类型定义为一个数字。好的，我知道了，所以我应该添加引号，例如。好的，我更改了

范围

和

金额的
范围和
值。谢谢，成功了。