Having spent approximately 30 hours on diving into VueJS, I am encountering some difficulties when it comes to using a component within another component. Seeking assistance from someone knowledgeable in this area to provide me with some clarification.
Prior to delving into the question at hand, I want to make a few things clear:
- As stated on the official Vue JS website:
It is not advisable for beginners to start with vue-cli, especially if you are unfamiliar with Node.js-based build tools.
Since my knowledge of JS frameworks is limited, I opted to download Vue.js and integrate it with my HTML file.
- I solely work with html, js, and css
For those who prefer a simplified query over digging through code snippets, here is an overview of my issue. Experienced individuals may find it concise and to the point:
In essence, I have established two global components - let's say component1 and component2. In my HTML, I utilize component1 as follows to automatically generate multiple divs based on JSON data:
<div v-for="data in JSON">
<component1 v-bind:datainfo="data"></component1>
</div>
Subsequently, I embed component2 within the template of component1 like so:
template:`
<div v-for="somedata in JSON">
<component2 v-bind:datainfo2="data"></component2>
</div>
`
Upon defining some methods within component2, I encountered a problem. Specifically, none of these methods (functions within the methods of component2) get defined, resulting in a warning from Vue:
[Vue warn]: Property or method "each function within my methods in component2" is not defined on the instance but referenced during render.
Hence, I am left pondering whether embedding a component inside another component is permissible, or if there exists an alternate approach. Although the data property functions correctly, the methods do not.
For individuals interested in reviewing the original code to grasp the nature of my inquiry, I shall present it here (apologies for any language barriers):
The predicament revolves around the inability of Vue to define the methods within an interior component of another component.
The relevant HTML Code Snippets:
<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'],
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'],
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');
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>
`
});
Meticulously checking for typos, case sensitivity issues, and potential oversights is crucial. The warning issued by Vue specifically points out:
[Vue warn]: Property or method "layerClickSingle" is not defined on the instance but referenced during render.
All other functionalities operate smoothly, except for the "layerClickSingle" method within the internal component. Hence, I seek clarity on why this method fails to function properly.