Alpine JS: x-show not reacting to variable change in async function - javascript

I am trying to build a Login-Modal with Alpine JS. The modal is shown initally when opening the page. I define it like:
<div x-data="login()" x-show="showLoginModal" x-cloak x-transition>
<form action="/token" method="POST" class="mt-8" #submit.prevent="submitData">
<!-- defining the login form -->
</form>
</div>
The corresponding Javascript part looks like this (leaving out some variables concerned with the data of the form.):
<script>
let token = undefined
let showLoginModal = false
function login() {
async submitData() {
await fetch(await fetch('/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: formBody
})
.then((response) => {
if (response.status === 200) {
return response.json();
} else {
throw new Error("Login failed.");
}
}).then((data) => {
token = data.access_token
showLoginModal = false
})
}
}
</script>
What I am trying to achieve here is that the modal is closed at this point. However although the variable is correctly set to false, the modal stays visible.
I am aware that this has something to do with teh variable being set in an asynchronus function. I do not know how to make it work however and have not found a tutorial that does something similar so far.
All help appreciated.

The problem is that login() function is not a valid Alpine.js component. It does not return any data, so showLoginModal is not reactive, therefore Alpine.js cannot detect when you mutate the value of the variable. A loginComponent using Alpine.data() should look like this:
<div x-data="loginComponent()" x-show="showLoginModal" x-cloak x-transition>
<form action="/token" method="POST" class="mt-8" #submit.prevent="submitData">
<!-- defining the login form -->
</form>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('loginComponent', () => ({
showLoginModal: true,
token: undefined,
async submitData() {
await fetch(...).then((data) => {
this.token = data.access_token
this.showLoginModal = false
})
}
}))
})
</script>
Note that we have to use the this. prefix in the component definition to access Alpine.js data (that are reactive).

Related

Vue v-if resolve Promise - implementing Laravel Gate in Vue

I'm trying to implement Laravel's authorization & policy in Vue, by implementing a mixin which sends a GET request to a controller in the backend.
The problem is the v-if directive is receiving a Promise, which obviously does not resolve
Below is a very simplified version of what I'm trying to do:
The global mixin, auth.js
import axios from "axios"
export default {
methods: {
async $can (permission, $model_id) {
let isAuthorized = false;
await axios.get(`/authorization?${permission}&${model_id}`)
.then(function (response) {
isAuthorized = response.data.isAuthorized
})
.catch((error) => {
isAuthorized = false;
});
return isAuthorized;
}
}
}
The main entry file, app.js
import Auth from '#/auth';
Vue.mixin(Auth);
...
new Vue({...})
Component.vue
<template>
<div>
<div v-if="$can('do-this', 12)">
Show Me
</div>
</div>
</template>
<script>
export default {}
</script>
Is there any way to 'await' the async $can operation in v-if? Or am I approaching this from a totally wrong direction?
You don't need async/await there because axios returns a promise. I think you can call that function from the created hook. Instead of returning a value, change the related data attribute, and use it in v-if like so:
<div v-if="permissions['do-this__12']">
data() {
return {
permissions: {
'do-this__12': false,
'or-this__13': false,
},
}
}
methods: {
getPermissions() {
for (const key in this.permissions) {
this.can(key.split('__')[0], key.split('__')[1])
}
},
can(permission, model_id) {
axios.get(`/authorization?${permission}&${model_id}`)
.then(response => {
this.permissions[`${permission}__${model_id}`] = response.data.isAuthorized
})
.catch(error => {
this.permissions[`${permission}__${model_id}`] = false;
});
},
}
created() {
this.getPermissions();
}
I didn't try my code, let me know if it fails. BTW, extracting this implementation to a mixin will be a better idea. If you like to do that, just leave "permissions" object in the component and move everything else to the mixin.
But that approach isn't effective when you need multiple API calls for permissions. That's why I think you should pass the whole permissions object to the backend and make the work in the server:
iPreferThisBecauseOfSingleAPICall() {
axios.get(`/authorization`, this.permissions)
.then(({ data }) => this.permissions = data)
}
// AuthorizationController
public function index(Request, $request)
{
$permissions = [];
foreach($request->all() as $permission) {
// run your backend code here
}
return $permissions;
}
One final note, instead of asking for permission each time, loading all permissions at one can be the best idea.

How to get url from :href in vue and axios?

I try to send post with vue and axios, from :href element, but I don't know how to fill axios url parament from :href.
I try this:
<div id="follow">
<a :href="'{% url 'follow' recipe.added_by.id %}'" #click="followUser()">Obserwuj</a>
</div>
Href element is fill with Django template tags, and works fine.
My vue and axios code:
methods: {
followUser() {
axios.post()
.then(response => {
console.log(response.data);
})
.catch(errors => {
if (errors.response.status == 401){
window.location = '/login';
}
});
}
},
When I click link, error appear: "TypeError: errors.response is undefined"
You cannot send a POST request via URL because the post parameters are not sent via the URL but you can use an alternate solution and instead of using a link to use a button that looks like a link and is in a form: How to make button look like a link? make-button-look-like-a-link.
have a good day, hope you find it helpful.
You can use destructuration in ES6 to get targeted element, in your case :
<button :href="'{% url 'follow' recipe.added_by.id %}'" #click="followUser">Obserwuj</button>
////
methods: {
followUser({ target }) {
const url = target.getAttribute('href')
axios.post(url)
.then(response => {
console.log(response.data);
})
.catch(errors => {
if (errors.response.status == 401){
window.location = '/login';
}
});
}
},

Loading images in vue.js from an API

Consider this:
An API loads a manifest of image metadata. The images have an ID, and with another API call returns a base64 image from the DB. The model for the manifest is attachmentRecord and the ID is simply a field.
I would rather not preload these large strings into an array (that would work).
so I have this (which lazy loads on any manifest change):
<div v-for="(attachment, index) in attachmentRecord" :key="index">
<img :src="fetchImage(attachment.id)" />
</div>
fetchimage() is a wrapper for an axios function which returns back from a promise. (writing this from memory):
this.axios({
method: "get",
url: url,
}).then(res => res.data)
.catch(() => {
alert("Unable to load raw attachment from this task and ID");
});
}
Now, the network calls go thru fine, the ID passes in correctly, I can see the base 64data, but they don't seem to make it to wrapper function or the src attribute. It always comes up blank. I tried wrapping it in another promise,only to get a promise back to the src attribute. What would be a best practice for this situation in Vue?
Ok, so far I made these changes with Constantin's help:
I tried to strip it down without a helper function:
Vue template Code:
<div v-for="(attachment, index) in attachmentRecord" :key="index">
<img :src="getAttachmentFromTask(attachment.id)" />
base method:
async getAttachmentFromTask(attachmentID) {
if (!attachmentID) alert("Unknown Attachment!");
let sendBack = "";
let url = "/server/..."
await this.axios({
method: "get",
url: url
})
.then(res => {
sendBack = res.data;
})
.catch(() => {
alert("Unable to load raw attachment from this task and ID");
});
// >>>>>>>>>alerts base64 correctly; Vue loads [object Promise] in img
alert(sendBack);
return sendBack;
}
It turns out that Vue doesn't handle async / await as well as I thought. Therefore, you have to save the image data to each attachment in attachmentRecord. This getAttachmentFromTask method now handles this when accessed the first time and populates a data property for the corresponding attachment object. On successive calls, that property is returned if it is already populated. Note the usage of Vue.set() because the property is not available in the initial data, but we want it to be reactive. You can even set up a fallback image like a loader, see the shortly flickering SO logo without text before the larger logo appears:
new Vue({
el: '#app',
data: {
attachmentRecord: [{
id: 1
}]
},
methods: {
getAttachmentFromTask(attachmentIndex, attachmentID) {
let record = this.attachmentRecord[attachmentIndex];
if (!record.data) {
Vue.set(record, 'data', null);
axios.get('https://kunden.48design.de/stackoverflow/image-base64-api-mockup.json').then((result) => {
Vue.set(record, 'data', result.data);
});
}
return this.attachmentRecord[attachmentIndex].data;
}
}
});
img {
max-width: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div v-for="(attachment, index) in attachmentRecord" :key="index">
<img :src="getAttachmentFromTask(index, attachment.id) || 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png'" />
</div>
</div>
old answer: (Unfortunately doesn't work that way with Vue currently)
Axios requests are asynchronous by default. So the function doesn't wait for then() to return the value. You could add the async keyword before your fetchImage function name and add the await keyword before this.axios. Then make the then callback assign the return value to a variable in the fetchImage function scope and have the function return it.
async fetchImage() {
let returnValue;
await this.axios({
method: "get",
url: url,
}).then(res => { returnValue = res.data; })
.catch(() => {
alert("Unable to load raw attachment from this task and ID");
});
return returnValue;
}

v-if Not work when the function return true or false [VueJs]

I am working on VueJs, And In my template section .. I defined a condition to check if the image URL exists or not.
template:
<div v-for="(sub, key) in Work.sub" :key="sub.id" >
<span v-if="Image('https://XXXX.blob.core.windows.net/XXXX/XXXXX-' + key +'.png')" >
<b-img :src="'https://XXXX.blob.core.windows.net/XXXX/XXXXX-' + key +'.png'" />
</span>
<span v-else>
<b-img :src="default_avatar"/>
</span>
</div>
In script:
Image: function(img_url)
{
return axios({
method: "GET",
timeout: 3000,
headers: {
.......................
},
url: img_url
})
.then( function(response){
this.ifImageExist = true;
return this.ifImageExist;
})
.catch( function(error){
this.ifImageExist = false;
return this.ifImageExist;
})
},
For default_avatar it is aleady definded in the data section and no problem with it.
My problem is when the Image function checks if the image URL exists or not. If it exists it provides the image in the given URL, but if it does not exist, the image will be blank!
For example:
when I run the code, I result will be like this:
But I want the first image to filled by default image, not show does not exist icon!
How to solve this problem?
First of all, your function Image() doesn't return a Boolean it returns a Promise (from axios),
so v-if evaluates as true;
To get v-if working with a API call (Axios GET), the simplest way is to turn that Image method in a Async Method
Image: async function(img_url)
{
return axios({
method: "GET",
timeout: 3000,
headers: {
.......................
},
url: img_url
})
.then( function(response){
this.ifImageExist = true;
return this.ifImageExist;
})
.catch( function(error){
this.ifImageExist = false;
return this.ifImageExist;
})
},
If you have all build configured right to work with async function, the method will wait for the response and evaluate to the Boolean which v-if is expecting.
Alternative solution: It looks like the only diff between the v-if and v-else is b-img's src, so an alternative would be to move the logic into JavaScript, mapping Work.sub into an array of image URLs that default to default_avatar only if the URL doesn't resolve.
So your template would be:
<template>
<div v-for="(img, index) in images" :key="index">
<b-img :src="img" />
</div>
</template
You'd add a data property to hold the image URLs:
data() {
return {
images: []
}
}
And a watcher on Work.sub, which sets this.images:
watch: {
'Work.sub': {
immediate: true,
async handler(sub) {
// For each image URL, attempt to fetch the image, and if it returns
// data (image exists), collect the URL. Otherwise, default.
this.images = await Promise.all(Object.keys(sub).map(async (key) => {
const img = sub[key];
if (!img) return this.default_avatar;
const url = `//placekitten.com/${img}`;
const { data } = await axios.get(url);
return data ? url : this.default_avatar;
}));
}
}
}
demo

Displaying bootstrap alert using angular2

I want to display Bootstrap alert when the user has saved the data.
my code is as below:
html page:
<div class="alert alert-success" *ngIf="saveSuccess">
<strong>Success!</strong>
</div>
<form #f="ngForm" (submit)="saveUser(f.value)">
/////Some form fields
<button class="form-control btn btn-primary" type="submit">save</button>
</form>
app.component.ts:
export class UserProfileComponent{
saveSuccess: boolean;
user: IUser;
saveUser(user:IUser) {
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.editUserForm = user;
this._http.post('api/user/'+this._current_user._id, JSON.stringify(this.editUserForm),{
headers: this.headers
}).subscribe(function(data) {
// if the update is successful then set the value to true
// this is getting updated
if (data){
this.saveSuccess = true;
}
else{
this.saveSuccess = false;
}
});
}
}
I want to display the alert when a successful POST is done.
I think i am missing how to bind the 'saveSuccess' variable to html so that alert can be displayed when the successful save is done. (I am new to Angular2)
Last night I didn't see it, it was probably too late. But your problem is not having the this context in the inline function where you set saveSuccess.
I'd suggest you use lambdas or "fat arrow function". Instead of
function(data) { ... }
you do
(data) => { ... }
This way the this context will be preserved. Just use it wherever you need inline function and you will have no problems anymore! :)
Your code with the lambda function:
export class UserProfileComponent{
saveSuccess: boolean;
user: IUser;
saveUser(user:IUser) {
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.editUserForm = user;
this._http.post('api/user/'+this._current_user._id, JSON.stringify(this.editUserForm),{
headers: this.headers
})
.map((data: Response) => data.json) // <-- also add this to convert the json to an object
.subscribe((data) => { // <-- here use the lambda
// if the update is successful then set the value to true
// this is getting updated
if (data){
this.saveSuccess = true;
}
else{
this.saveSuccess = false;
}
});
}
}
Consider this dynamic alert component:
Angular2 Service which create, show and manage it's inner Component? How to implement js alert()?
for example:
.
this.alertCtmService.alertOK("Save changes???").subscribe(function (resp) {
console.log("alertCtmService.alertOK.subscribe: resp=" + resp.ok);
this.saveData();
}.bind(this) );
See this Demo here

Categories