Develop Reference

Using Alpine.js x-on events on Astro.js component

I'm trying to build some simple stuff with Astro.js for HTML templates and Alpine.js for interactivity when needed. I stumbled upon problem of trying to use Alpine x-on events on Astro component
Here is sample usage of the Button component:
<div x-data>
<Button #click="console.log('Clicked astro')">Click me</Button>
<button #click="console.log('Clicked normal button')">Click me</button>
</div>
The first one doesn't work while the native button works as normal.
Button component is just a button element with some tailwind classes, nothing fancy:
<button class="border-[1px] rounded-lg transition px-6 py-2 hover:text-inherit hover:border-transparent">
<slot />
</button>
How can I get it to work? I really love astro with alpine so far but this little thing is stopping me from using it for my project.
I tried various of different things but none of them worked really. I went through docs and couldn't find anything related to my issue - it feels like there must a simple solution but I'm missing something.

I have reached out to Astro support on discord and it was answered by user happydev there:
Anything passed to an astro component like this is taken as a prop, so you need to pass it to the element you want to bind the event on
Something like this
//Button.astro
---
const {"#click": click} = Astro.props
---
<button #click={click}>
<slot/>
</button>

Prevent route change in Vue router

<router-link to="SOME_ROUTE">
<div class="outer-div">
<div class="inner-div" v-on:click="doSomething"></div>
</div>
</router-link>
Some I am trying to create a link which will have a image in it. I am trying to make the inner div to do something without triggering the route change, how am I be able to achieve this? I have tried the event modified v-on:click.stop, but it doesn't seem to work, the route will still change after the .inner-div is clicked. Thanks in advance for your kind help.

I think you just need to use
<div class="inner-div" v-on:click.prevent="doSomething"></div>
instead of
<div class="inner-div" v-on:click.stop="doSomething"></div>
to prevent the default action. See: https://stackoverflow.com/a/8952200/6279569
Here's the demo.

Routing not working in angular web app

I'm trying to route to a reset page from the login page of the webapp i'm working on but nothing happens when I click on "forgot Password". when I replace #/login with #/reset in the address bar the view changes to the reset page so I know the route is setup correctly. Any idea what i'm doing wrong?
My code:
in my login template:
<a href="#" class="forgotPassword" ng-click="forgotPassword()">Forgot Password?
In my login controller:
$scope.forgotPassword = function(){
$location.path('/reset');
}

whenever using anchor tag and want to redirect by using ng-click, do not use href
for you remove the href
now your template look like this..
<a class="forgotPassword" ng-click="forgotPassword()">Forgot Password?

Have you tried to redirect your view with the "href" tag instead of the "ng-click" function?
Forgot Password?

Href doesn’t work in ion-option-button?

hy guys,
in an Ionic project I made a ion-list ion-items and these ion-option-buttons:
<ion-item ng-repeat="(id,place) in places" >
<h2>{{place.name}}</h2>
<ion-option-button class="button-positive" href="#/tab/place/{{id}}">
edit
</ion-option-button>
</ion-item>
but href="..." is not working
Thanks for help

I solved the problem:
template:
<ion-option-button class="button-positive" ng-click="goTo('edit-place',{'placeId':id})">
Controller:
$scope.goTo=function (state,params) {
$state.go(state,params);
}

In angularJS, The correct way to use href is
<a ng-href="#/tab/place/{{id}}"></a>
ng-href Doc
Hope it helps :)

Try using This
<h2>{{place.name}}</h2>
<ion-option-button class="button-positive">
<a href="#/tab/place/{{id}}">
edit
</a>
</ion-option-button>

Href attribute is supposed to be use with anchor tag. You can try to wrap ion-option-button with anchor tag or use event like onClick to navigate using javascript code.

Since you're using ui-router you don't need to make a goTo function. Just use ui-sref to load your dynamic state. Also I would try not to use "-" in the state name (editPlace).
<ion-option-button class="button-positive" ui-sref="edit-place({placeId:id})">edit</ion-option-button>

Angular: Using $location.path() instead of href

I recently began using $location.path() within ng-click functions rather than simply referencing a path within the href of an a tag.
My reasons for doing so:
Preference to have ALL logic, including paths navigated to moved out of my views (this may be a bit extreme).
For rare instances where multiple html templates reference the same controller I can change $location.path() once rather than having to remember to update corresponding href's within each template.
So instead of:
<a class="button button-balanced" href="/signup">Sign up</a>
I have:
<button class="button button-balanced" ng-click="goToSignup()">Sign up</button>
and in my controller:
$scope.goToSignup = function() {
$location.path('/signup');
}
My question is, are there drawbacks to setting my Angular app up this way? (note: I'm mainly building Ionic hybrid mobile apps)

Preference to have ALL logic, including paths navigated to moved out of my views (this may be a bit extreme).
You can do with your all logic and paths navigated by using same link button
<a href="/signup" class="button button-balanced" ng-click="SignUpFunc()>Sign Up</a>
the a tag is first execute the click function, then execute the href call. So you can do it by link button.
For rare instances where multiple html templates reference the same controller I can change $location.path() once rather than having to remember to update corresponding href's within each template.
If you using menu option, you can use link button
but if you navigate one controller to another controller, then you should use the
$location.path('/signup');

I also used similar logic in my project.It works fine for me.
<button class="button" ng-click="go('view')">Next Page</button>
$scope.go = function ( path ) {
$location.path( path );
};