{{titleText}}

{{exampleText}}
				
					
const { createApp } = Vue
const $ = jQuery;

const app = createApp({
      
	/* Detect variable changes */
    watch: {
	},
	
	/* Variable declerations */
    data() {
      return {
      }
    },
    
	/* Functions / Methods */
	methods: {
	},
	
	/* Execute on page load  */
	mounted () {
	}
});
/* #vue-app is an id of the element you want to mount your vue script */
app.mount('#vue-app');

				
			

Link to Main Script:

v-if, V-show

u
HIDE / SHOW image on the left using v-if, v-show in the elementor – custom attributes. You can use v-else, v-else-if if v-if is false.

showImageUsingVif: {{showImageUsingVif}}

V-model

Provided Text: {{inputValue}}



Selected Option: {{selectedWebDeveloper}}



Adding On-click and Other Events

				
					/* Functions / Methods */
		methods: {
			showHideToggle: function () {
				this.showImageUsingVif = !this.showImageUsingVif;
			}
		},
		/* Execute on page load  */
		mounted () {
			/*
			 * Elementor does not allow custom click events on their attributes, you can do this for now
			 * bind a click event to element "$('.showHideVIf')" that triggers the method showHideToggle()
			 */
			$('.showHideVIf').click( () => {
				this.showHideToggle()
			});
		}
				
			

Looping using V-for

  • {{ dev.name }}
				
					data () {
    return {
        webDevelopers: [{'name' :'Romie Silvano'}, {'name' :'Rosalito Udtohan'}, {'name' :'Danilo Lu-ang'}]
    }
}
				
			

Watchers | detecting variable changes

Creating watchers requires the variable name as the function name. Parameter 1 is always the New Value, Parameter 2 is always the Old Value

				
					
watch: {
	selectedWebDeveloper: function (newVal, oldVal) {
	    // execute code here whenever variable changes value
		alert(newVal+' Has been selected!');
	}
},
data () {
    return {
        selectedWebDeveloper: null
    }
}