VueJS trouble with using component inside another component

Question

I'm new to VueJS and have already spent like 30 hours on learning it. I have now trouble with using component inside another component. I may need someone who can help me to explain a little bit.

before the quesion, let me make something clear:

1. According to the Vue JS officail site:

We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.

I'm pretty new with JS-Framework so I chose to download the Vue.js and bind it to my HTML file.

2. I only have html, js and css

For those who don't what to read through all the codes, I will simplify my quesion here. Because I think when someone is very experienced, he/she may not need to read my silly codes:

basiclly I have defined two global components, let's say component1 and component2. And in HTML, I use the component1 like this to get multiple divs automaticlly built with the JSON data:

<div v-for="data in JSON">
    <component1 v-bind:datainfo="data"></component1>
</div>

And then, I use the component2 inside the component1's template like this:

template:`
    <div v-for="somedata in JSON">
        <component2 v-bind:datainfo2="data"></component2>
    </div>
`

finally I defined some methods in component2, there comes the question. All of them (the functions in methods in component2) won't be defined and I get the warning from Vue says:

[Vue warn]: Property or method "each function in my methods in component2" is not defined on the instance but referenced during render.

So I am wondering if we are allowed to put a component inside another component or should I do this in another way. But if we can use multiple components inside each other, why can't we defind some methods in the inside component, the data property works fine, but methods not.

For those, who want to read the original codes to understand my question, I'll post them here: (forgive my poor English)

The trouble I'm dealing with is the methods in the inside component of another component won't be defined by Vue.

The related HTML Codes:

<div v-for="(layer, idx) in WMSLayersSource">
    <wms-layer-select-group v-bind:layergroupinfo="layer"></wms-layer-select-group>
</div>

The main.js file:

var wmsLayerSelectSingle = Vue.component('wms-layer-select-single', {
props:['singlelayerinfo'], // case-insensitive and don't use '-'
data: function() {
    return {
        opacitySingle: 'display: none',
    }
},
method: {
    layerClickSingle: function() {
        if (this.opacitySingle == 'display: block') {
            this.opacitySingle = 'display: none';
        } else {
            this.opacitySingle = 'display: block';
        };
    },
    test: function() {
        console.log('test');
    }
},
template: `
    <li class="singleLayer">
        <input type="checkbox" />
        <span v-on:click="layerClickSingle">
            {{ singlelayerinfo.layers }}
        </span>
        <input class="opacity" v-bind:style="opacitySingle" min="0" max="1" step="0.1" value="1.0" type="range">
    </li>
` 
});

var wmsLayerSelectGroup = Vue.component('wms-layer-select-group', {
props: ['layergroupinfo'], // case-insensitive and don't use '-'
data: function() {
    return {
        displaySingle: '',//'display: none',
        opacityGroup: '',
    }
},
methods: {
    layerClickGroup: function() {
        console.log('layerClickGroup ');
        if (this.displaySingle == 'display: block') {
            this.displaySingle = 'display: none';
        } else {
            this.displaySingle = 'display: block';
        };
    },
},
created: function() {
    console.log('Component wms-layer-select-group is created');
    // hide the sublayers of a layer group and show the single layers if they don't belong to a group
    if (this.layergroupinfo.groupName == "singleLayer") {
        this.displaySingle = 'display: block';
    } else {
        this.displaySingle = 'display: none';
    }
},
template: `
    <div>
        <li class="LayerGroup" v-if="layergroupinfo.groupName != 'singleLayer'">
            <input type="checkbox" />
            <span @click="layerClickGroup">
                <b>{{ layergroupinfo.groupName }}</b>
            </span>
        </li>
        <div v-for="(singleLayer, idx) in layergroupinfo.layerCollection" v-bind:style="displaySingle">
            <wms-layer-select-single v-bind:singlelayerinfo="singleLayer"></wms-layer-select-single>
        </div>
        <hr/>
    </div>
`
});

I'm very careful with things like typo and case-insensitivity and double checked everything. because the warning by Vue I got is only the

[Vue warn]: Property or method "layerClickSingle" is not defined on the instance but referenced during render.

and everything else works fine. So I would like to know why the method "layerClickSingle" in the inside component won't work.

Answer 1

method: {
layerClickSingle: function() {
    if (this.opacitySingle == 'display: block') {
        this.opacitySingle = 'display: none';
    } else {
        this.opacitySingle = 'display: block';
    };
},
test: function() {
    console.log('test');
}
},

This should be methods not method