Vue.js 2 Multiple Properties defined in one Single-File component

Question

I am working on a Laravel 5.5 & Vue.js 2.x project, after several digging searchs and questions I came to components. But still I have a warning message when the page renders:

[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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in < Root >)

I have the following Single-File component in a Vue file: 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>

I have registered the component "correctly" since some data seems to work. This is in the Vue instance file. Besides, I have defined the following element which seems it renders well in the form:

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

This seems to be working because it shows the following while rendering:

As seen, the first field is being rendered with their functions and data, but not the second one, despite according to Vue.js documentatiob seems to be ok.

Any comment is appreciated.

mitch mitch · Accepted Answer · 2018-02-06T21:05:26

Vue expects range to be a string, but you're using v-bind (:range and Vue treats trimestral as variable, which is not defined), when passing a prop, instead of :range="..." use range="".

More you can read in docs here: https://vuejs.org/v2/guide/components.html#Literal-vs-Dynamic

Vue.js 2 Multiple Properties defined in one Single-File component

1 Answers