Shopware 6 Custom Component watch Plugin Config - vue.js

Question

I am new to Shopware 6 and to vue.js as well. I would like to have a text-field in my plugin's config.xml, which will be disabled if another value in the config is true/false. Is there an event to subscribe? Can this be reactive (change disable state by only clicking the switch without having to save?). The switch should be able to disable a variable amount of input fields so I would not prefer to build a component just containing the switch and a corresponding text-input. Have you guys any hint?
For example:
I tried something like:
watch: {
'PluginName.config.disableswitch' (){
console.log("changed")
},
'$PluginName.config.disableswitch' (){
console.log("changed")
},
'PluginName.config.disableswitch': {
handler() {
console.log("changed");
},
},
'$PluginName.config.disableswitch': {
handler() {
console.log("changed");
},
},
},

Answer 1

My first suggestion is to install the VueJS extension on your browser, then inspect the Vue elements to know what data they get from the parents (it's not much).
So to pass down the data you want we will have to do just a tiny bit of work.
First, create a new plugin, e.g. src/custom/plugins/DockwareSamplePlugin
Then we need to rewrite the top level setting module to pass the config references you mentioned in your watcher.
Create a file src/Resources/app/administration/src/component/field-bind/settings/index.js
const {Component} = Shopware;
import template from './sw-system-config.html.twig'
Component.override('sw-system-config', {
template
});
You guessed it, in the same directory, create a file called src/Resources/app/administration/src/component/field-bind/settings/sw-system-config.html.twig
{% block sw_system_config_content_card_field %}
<sw-inherit-wrapper
v-model="actualConfigData[currentSalesChannelId][element.name]"
v-bind="getInheritWrapperBind(element)"
:has-parent="isNotDefaultSalesChannel"
:inherited-value="getInheritedValue(element)"
:class="'sw-system-config--field-' + kebabCase(getElementBind(element).name)"
>
<template #content="props">
<sw-form-field-renderer
v-bind="getElementBind(element, props)"
:key="props.isInheritField + props.isInherited"
:disabled="props.isInherited"
:value="props.currentValue"
#input="props.updateCurrentValue"
#change="props.updateCurrentValue"
:actualConfigData="actualConfigData[currentSalesChannelId]"
:myConfig="config[index]"
/>
</template>
</sw-inherit-wrapper>
{% endblock %}
Most of it is a copy from the original except the actualConfigData & myConfig attributes. This will insure that these props are passed to every field/component you create in your src/Resources/config/config.xml file.
Here is an example of such file implementation:
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/master/src/Core/System/SystemConfig/Schema/config.xsd">
<card>
<title>#DockwareSamplePlugin# Settings</title>
<title lang="de-DE">#DockwareSamplePlugin# Einstellungen</title>
<input-field type="bool">
<name>customToggle</name>
<label>Config switch</label>
<specialType>disable</specialType><!-- this is an example of how we know what switch controls hiding -->
</input-field>
<component name="field-bind-text">
<name>customText</name>
<label>Text</label>
</component>
</card>
</config>
Next thing we need to create that component field-bind-text that gets shown/hidden.
Create a directory structure & file src/Resources/app/administration/src/component/field-bind/text/index.js
const {Component} = Shopware;
import template from './field-bind-text.html.twig'
Component.register('field-bind-text', {
template,
methods: {
getHideToggleName() {
return this.$attrs.myConfig.elements.find(element => element.config?.specialType === 'disable')['name']
}
},
computed: {
shouldDisable() {
return this.$attrs.actualConfigData[this.getHideToggleName()] ?? false
}
}
});
getHideToggleName - this gets the XML entry name I mentioned earlier, but you could also adjust to whatever you like it to be. Can create a custom component & look for that instead (e.g. element.config.componentName === 'my-component')
shouldDisable - this looks up the value of the XML toggle (by name)
Then the twig file src/Resources/app/administration/src/component/field-bind/text/field-bind-text.html.twig
<div class="some-class">
<sw-text-field :disabled="shouldDisable"></sw-text-field>
</div>
Oh, and dont forget to load it all with that src/Resources/app/administration/src/main.js file
import './component/field-bind/text'
import './component/field-bind/settings'
Alrighty! See, easy peazy lemon squeezie. Now you can quit & go back to working with mage2.