Jump to content

Topic on Talk:Codex/Flow

Toggle buttons not toggling

1
Sebastian Berlin (WMSE) (talkcontribs)

I've added elements following the examples on this page and the documentation.

One thing I can't get to work is toggle buttons. They don't change state and the update function always receives true. As a contrast toggle switches work as expected. What am I missing?

Userscript code:

mw.loader.using( [ 'mediawiki.util', '@wikimedia/codex' ] ).then( function( require ) {
	const Vue = require( 'vue' );
	const Codex = require( '@wikimedia/codex' );
	let container = document.querySelector("#bodyContent");
	const mountPoint = container.insertBefore( document.createElement( 'span' ), container.firstChild );

	Vue.createMwApp( {
		data: function() {
			return {
				codexLink: 'https://doc.wikimedia.org/codex/latest/'
			};
		},
		template: `
			<cdx-toggle-switch v-model="switchValue" @update:model-value="onUpdate"></cdx-toggle-switch>
			
			<cdx-toggle-button
				v-model="buttonValue"
				@update:model-value="onUpdate"
			>
				Toggle
			</cdx-toggle-button>
		`,
		methods: {
			onUpdate(arg) {
				console.log("> onUpdate():", arg);
			}
		},
		mounted() {
		},
		unMounted() {
		}
	} )
	.component( 'cdx-toggle-switch', Codex.CdxToggleSwitch )
	.component( 'cdx-toggle-button', Codex.CdxToggleButton )
	.component( 'cdx-icon', Codex.CdxIcon )
	.mount( mountPoint );
} );
Reply to "Toggle buttons not toggling"