<div x-data="{
parcel: {name: '', show: false},
add: function(){
google.script.run.withSuccessHandler(this.onSuccessLogin).tryLogin(this.login)
this.parcel.show = true
},
Direct update for 1 level component communication
onSuccess(abc){
let event = new CustomEvent("spin", { detail: { spinner:'hide'} })
window.dispatchEvent(event)
event = new CustomEvent("title", { detail: { title:'Salam...'} })
window.dispatchEvent(event)
},
--------------------------------------------------------
<section x-data="myObj()" x-on:spin.window="spinner = $event.detail.spinner"
x-on:title.window="title = $event.detail.title">
update x-data from onSuccess / onFailure
<section x-data="dataUser()" x-init="watchID">
--------------------------------------------------------
function dataUser(){
return {
selectedID: '',
watchID(){
this.$watch('selectedID', value => alert(value))
}
}
$watch
<section x-data x-init="$store.darkMode.watchID">
--------------------------------------------------------
watchID(){
this.$watch('$store.darkMode.selDropdownID', (value => {
//alert(value)
let dataFind = Alpine.store('darkMode').user.details.find((v) => { return v.id == value })
Alpine.store('darkMode').supervisor = dataFind.supervisor
Alpine.store('darkMode').title = dataFind.title
Alpine.store('darkMode').synopsis = dataFind.synopsis
}))
},
$watch in global state
<div class="form-check form-check-inline">
<input x-model="selectedID[index]" class="form-check-input" type="radio"
:name="index" id="radio1" value="Yes">
<label class="form-check-label" for="radio1">Yes</label>
</div>
<div class="form-check form-check-inline">
<input x-model="selectedID[index]" class="form-check-input" type="radio"
:name="index" id="radio2" value="No">
<label class="form-check-label" for="radio2">No</label>
</div>
Radio button using x-for
1 :name
selectedID[index]
onSuccessLogin: function(user){
console.log(user)
///this.login.id='1234' -NOT WORK-
//$store.darkMode.login.id = '5678' -NOT WORK-
Alpine.store('darkMode').login.id = '4567'
},
Use Alpine.... for nested function
<div class="text-end mt-0 pt-0">
<a x-bind:href="$store.darkMode.hRef" target="_top" class="text-white text-end">
<i class="bi bi-power" style="font-size: 1.1rem" ></i>Logout
</a>
</div>
--------------------------------------------------------
hRef : 'https://script.google.com/a/macros/uitm.edu.my/s/....dev',
Logout
target="_top" or "_blank"
<!DOCTYPE html>
<html>
<head>
<?!= HtmlService.createHtmlOutputFromFile('Cdn').getContent() ?>
</head>
<body>
<main x-data>
<div x-show ="Alpine.store('darkMode').toggleLogin">
<?!= HtmlService.createHtmlOutputFromFile('Login').getContent() ?>
</div>
<div x-show="!$store.darkMode.toggleLogin" x-init="$store.darkMode.watchID"
x-transition:enter.duration.100ms>
<?!= HtmlService.createHtmlOutputFromFile('User').getContent() ?>
</div>
</main>
<?!= HtmlService.createHtmlOutputFromFile('Alpine').getContent() ?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous">
</script>
</body>
</html>
Main Structure
:class="{ 'block' : !open , 'hidden' : open}"
:class (Add / remove)
:class="$store.darkMode.btnNext1 == 'disabled' ? 'disabled' : 'enabled'"
:class (Add / remove)
using ternary operator
contentDisplay: [],
content: [
{ name: 'Test 1', description: 'Test Description 1' },
{ name: 'Test 2', description: 'Test Description 2' },
{ name: 'Test 3', description: 'Test Description 3' },
],
--------------------------------------------------------
this.contentDisplay = [],
this.content.forEach(v => {
this.contentDisplay.push(v)
})
// ALTERNATIF
this.contentDisplay = this.content.map(v => v)
Update content (Array)
this example run on-click function