Currently, I am facing some challenges while working on this web application. It seems like my progress is slower than anticipated and there are certain aspects of Vue 2 that I'm still struggling to grasp.
One issue that I've encountered involves a component that I've integrated into the main Vue instance. While the function within the component, which I $emit, works properly, I'm unable to get the main function to execute as expected.
The component file, PropertyHouseComponent.vue, looks like this:
<template>
<fieldset class="form-group col-md">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="house"
name="house"
v-model="data"
@click="callFunc">
<label
for="house"
class="form-check-label"
>House</label>
</div>
</fieldset>
</template>
<script>
module.exports = {
props: {
value: {
type: Boolean,
required: false
}
},
data: function() {
return {
data: false
}
},
created: function() {
if(this.value) {
this.data = this.value;
}
},
methods: {
callFunc: function() { <-- The issue lies with calling this method correctly
this.$emit('toggleHouse', this.data);
}
}
}
</script>
I've attempted using
this.$parent.$emit('toggleHouse')@click="callFunc", but it yielded the same result. Additionally, I tried implementing the following code:
watch: {
data: function(value) {
this.$emit('toggleHouse', value);
}
}
The primary Vue instance's function, toggleHouse() in app.js, is outlined below:
Vue.component('property-house', require('./components/PropertyHouseComponent.vue'));
...
toggleHouse: function() { <-- Regrettably, this method is not being invoked
if(value) {
this.csHouse = value;
}
}
In an attempt to troubleshoot, I confirmed that I am passing the 'value' parameter when calling the function by utilizing console.log(). However, this doesn't seem to be the root cause of the problem at the moment.
Lastly, here is the HTML snippet where the component is used:
<property-house :value="true"></property-house>
The rendering in the DOM appears correct based on the provided image: https://i.sstatic.net/LTEDK.png
Hence, I am seeking guidance on what I might be overlooking or doing incorrectly in order to effectively trigger toggleHouse from within the component. Any insights would be greatly appreciated.