Не обновляется пропс компонента на Vue JS (Vue 1)
Проблема: отрабатывают консоли на страницах(Settings.vue и Home.vue) о корректном изменении статусов wifi, но не передается статус пропс в компонент WifiIcon.vue, соответственно и не отображается корректно иконка. В компонент WifiIcon.vue улетает изначально заданный статус на странице home (data() { wifiStatus: null}). проходит первое монтирование и не проходит обновление. Не могу понять, что не так. Перебрал массу способов написания и передачи пропса..
Settings.vue - страница настроек, где подключается wifi
Home.vue - домашняя страница при включении устройства
WifiIcon.vue - страница-компонент с иконками вкл\выкл wifi
```
//Settings.vue
<template>
<input name="wifi" type="radio" id="wifi_on" v-bind:value="true" v-model="wifiStatus" @click="setWifiOn"; setWifiStatus()">
<input name="wifi" type="radio" id="wifi_off" v-bind:value="false" v-model="wifiStatus" @click="setWifiOn"; setWifiStatus()">
</template>
<script>
export default {
data () {
return {
wifiStatus: null,
},
},
methods:{
setWifiStatus: async function () {
try {
let result;
if (this.wifiStatus) {
result = await exec('rfkill unblock wifi');
} else {
result = await exec('rfkill block wifi');
}
if (result.stderr) {
this.$store.state.log.error(result.stderr);
type: 'error'
});
}
} catch (err) {
this.$store.state.log.error(err);
type: 'error'
});
}
},
async setWifi() {
try {
const status = await new Promise((resolve, reject) => {
piWifi.status('wlan0', (err, status) => {
if (err) {
reject(err);
} else {
resolve(status);
}
});
});
if (status.ssid) {
this.connection = status.ssid;
this.wifiStatus = true;
} else {
this.wifiStatus = false;
}
} catch (err) {
this.wifiStatus = false;
this.$store.state.log.error(err);
type: 'error'
});
}
},
setWifiOn(){
this.$root.$emit('wifiStatusChanged', this.wifiStatus);
console.log('wifiStatusChanged on settings.vue ==>', this.wifiStatus)
},
},
};
```
```
//Home.vue
<template>
<wifi-icon :wifiStatus="wifiStatus"></wifi-icon>
</template>
<script>
import WifiIcon from '../../Pages/Home/WifiIcon.vue';
export default {
name: 'home',
components:{
'wifi-icon': WifiIcon,
},
data () {
return {
wifiStatus: null,
},
async mounted () {
this.$root.$on('wifiStatusChanged', await function(wifiStatus) {
this.wifiStatusChanged(wifiStatus);
}.bind(this));
},
methods: {
wifiStatusChanged: function(wifiStatus) {
this.wifiStatus = wifiStatus;
console.log('wifiStatusChanged on Home.vue ==>', wifiStatus);
},
},
```
```
// WifiIcon.vue
<template>
<div>
<div v-if="wifiStatus">
<img src="../../../assets/images/wifi.png" alt="Wi-Fi подключен" style="width: 25px;">
</div>
<div v-if="!wifiStatus">
<img src="../../../assets/images/wifi_line.png" alt="Нет подключения Wi-Fi" style="width: 25px;">
</div>
</div>
</template>
<script>
export default {
name: 'WifiIcon',
props: {
wifiStatus: {
type: Boolean,
required: true,
},
},
mounted() {
console.log('props in WiFiIcon.vue ==>', this.wifiStatus);
},
};
</script>
```