I’m trying to access email property of user object

{“name”:”test”, “email”:”test@test.x“}

like this:

<input type=”text” :placeholder=”user.email”>

When I try to access property in console -> console.log(user.email) everything work’s just fine

component code ->

<template>
<div>
<form method=”POST” action=”smth.php”>
<input type=”text” :placeholder=”user.email”>
</form>
</div>
</template>

<script>
export default {
props: {
user: {
type: Object,
required: true
}
},
}
</script>

Component call ->

<div class=”container”>
<page-profile :user=”{ $user->toJson() }”></page-profile>
</div>

Could you please show me the right way how to access the email property of user object?
Both console and npm watch show no errors.

Solution :

The issue is with this code:

<div class=”container”>
<page-profile :user=”{ $user->toJson() }”></page-profile>
</div>

You don’t need those curly braces in a property definition. Those are only required in the content of a tag and not an attribute.

I’m also not sure what the -> arrow is supposed to be doing. Is that from PHP?

You probably want something more like the following:

<div class=”container”>
<page-profile :user=”$user.toJson()”></page-profile>
</div>

when having a problem working with JQuery DataTable. I had to use that plugin since I had no other choice allowed due to my project requirements.

So the problem is that, when adding rows to DataTable and in the row there’s a column with button HTML tag. Now to bind an on click handler to the button.

dt.Rows.Add({
column_1_data,
column_2_data,
“<button @click=’itsVueTime’>MyButton</button>”
});

Here dt is the DataTable’s instance. Now the problem is @click won’t work. I understand that its not being rendered by vue.js thats why its not working.

Is there a way to bind click event in this condition?

Solution :

Without knowing more context, I would recommend this way of doing it

In the component with the method you want to use, you can expose the component like this. (I use mounted, but you can use other lifecycle methods too like created)

mounted() {
window.app = this;
}

then you can use

<button onclick=”app.holler()”>Say Hello</button>

you can also expose just the function you want to use like so

mounted() {
window.itsVueTime = this.itsVueTime;
}

i try to close the page even and the browser in order to logoff user,but i failed.

1.window.onunload;
2.window.onbeforeunload.

window.onunload = function() {
differTime = new Date().getTime() - beginTime;
if (differTime <= 5) {
clear(CURRENT_LOGIN_INFO, false);
} else {}
clear(CURRENT_LOGIN_INFO, false);
};

window.onbeforeunload = function(e) {
beginTime = new Date().getTime();
e = e || window.event;
if (e) {
clear(CURRENT_LOGIN_INFO, false);
e.returnValue = “close!!!”;
}
clear(CURRENT_LOGIN_INFO, false);
return “close!!!”;
};

the user has been logout but actually it still here.

Solution :

Invalidating the user client-side is a bad practice. You should try to expire a users session server-side. That being said, you should check where you session information is kept in the browser (eg. LocalStorage, sessionStorage, Cookies). Have a look at https://www.w3schools.com/jsref/met\_storage\_clear.asp

when using axios to make an API call. The call occurs when the mouse enters certain HTML elements on the page. Usually, on the first hover none of the data is received, but on the second one the data usually appears. I figure that this is because when not waiting for the API call to return. Is there a way to implement this?

Below is the Axios instance that I use to make the API call.

Thank you for the time and consideration.

instance
.get(‘observations?patientId=37’)
.then((response) => {
this.clinicaltabs[0].title = response.data.data;
});

Solution :

What I’d do:

Use a spinner loading for you hoverable HTML element and make it visible when sending the request.

this.loading = true; //Some way for disabling the hover event

instance
.get(‘observations?patientId=37’)
.then((response) => {
this.clinicaltabs[0].title = response.data.data;
})
.finally(() => this.loading = false);

Then you could use the v-if=”loading” or something like to control the display of the component until it loads.

Login.vue

methods: {
loginUser() {
this.$store.dispatch(“auth/loginUser”, { email: this.email, password: this.password })
.then(() => {
// Login ok, redirect user to dashboard
})
.catch(() => {
// Show error
})
}
}

Auth.js

actions: {
async loginUser ({dispatch}, {email, password}) {
return axios.post(url, {email, password})
.then(response => {
dispatch(‘otherAction’);
})
.catch(response => {
})
},
async otherAction ({ dispatch, commit }) {
// Do other stuff
}
}

I use Vuex and actions to perform API calls. I need to wait otherAction dispatch before redirecting user to dashboard.
The problem is I can not use await in the then call. axios.post in the auth.js basically checks credentials of the user. After that I need to do a few more call to get all necessary data to show. Currently, user is redirected to dashboard, but I see errors on the dashboard because it doesn’t wait until the ‘get extra data of a user’ call is completed to get the needed data. The thing is timing issue.

My way of thinking may be completely wrong. How can I make it work?

Solution :

Make another action that dispatches all the other actions and stores the returned promises in an array then use Promise.all()

I’m trying to replace an existing element with a component, but using the existing element data in the new component.

How would you pass the existing element into the new components slot, maintaining the original elements un-escaped HTML markup?

document.addEventListener(“DOMContentLoaded”, function() {
let ExampleComponent = {
data: function() {
return {};
},
props: [“type”],
template: `
<div>
<span :class=”type”>Decoration</span>
<slot name=”myslot”>default content</slot>
</div>
`
};

new Vue({
el: “#app”,
components: {
example: ExampleComponent
},
data() {
return {};
},
methods: {
addExampleComponent: function() {
let target = this.$el.querySelector(“.example-target”);

let ComponentClass = Vue.extend(ExampleComponent);
let instance = new ComponentClass({
propsData: { type: “primary” }
});
instance.$slots.myslot = target.outerHTML;
instance.$mount();

target.replaceWith(instance.$el);
}
}
});
});
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<div id=”app”>
<div class=”example-target”>replace me!</div>
<div>
<button v-on:click=”addExampleComponent”>Replace</button>
</div>
</div>

Currently replace me! in the “example-target” element literally displays Decoration <div class=”example-target”>replace me!</div> after pressing the “Replace” button. I’m looking to keep the HTML intact, without being escaped.

Solution :

Try using the v:html directive.

document.addEventListener(‘DOMContentLoaded’, function () {
let ExampleComponent = {
data: function () { return {} },
props: [‘type’],
template: `
<div>
<span :class=”type”>Decoration</span>
<slot name=”myslot”>default content</slot>
</div>
`
}

new Vue({
el: ‘#app’,
components: {
‘example’: ExampleComponent
},
data() { return {} },
computed: {
addExampleComponent: function () {
let target = this.$el.querySelector(‘.example-target’)

let ComponentClass = Vue.extend(ExampleComponent)
let instance = new ComponentClass({
propsData: { type: ‘primary’ }
})
instance.$slots.myslot = target.outerHTML
instance.$mount()

return instance.$options.template
}
}
})
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<body>
<div id=”app”>
<div class=”example-target”>replace me!</div>
<div>
<div v-html=”addExampleComponent”></div>
</div>
</div>
</body>

I’m trying to implement such a script, but I do not know how to implement the color change point design
please help .
https://venni.com.tr/interaktif-uygulama-1

Solution :

Those are actually different images

look at

https://venni.com.tr/upload/content/images/mutfak.jpg

and

https://venni.com.tr/upload/visual/red-5899.png

So, to achieve that functionality, you need to create different images and adjust an <img> tag over the original image at the desired position, then change the url according to the color on which user clicks

What would be the exact path to get my header-logo.png in header.vue.js file.

In header.vue.js file I tried background-image: url(‘./../resources/images/header-logo.png’) or background-image: url(‘./.././resources/images/header-logo.png’) or some other options as well but it is not able to locate to the image.

If I can get explanation as well then it would be more helpful.

Solution :

background-image: url(‘../.././resources/images/header-logo.png’)

Should work, also the transpilation will map it so no need to point to the dis file.
Remember ./ is at the same level, where ../ takes you one up, you need to go up to src/ then up to account-app then into account-app/resources….

there is a vue.js application using TypeScript, Rxjs and Axios.

After making an http get request to execute some code, for example to hide a loading indicator.
What would the best way to do this be using Rxjs?
I know I’m subscribing to a stream of data here. Would a promise be better?

I currently have the below code…

Axios.get<Array<account>>(`https://localhost:5003/api/accounts\`)
.pipe(
concatMap(response => response.data),
filter(response => filerFunction(response))
)
.subscribe(
response => {this.tableData.push(response); console.log(‘response: ‘ + response)},
error => console.log(error)
);

Solution :

I’ve worked it out. You could use the Finalize operator or the Complete function…

Axios.get<Array<account>>(`https://localhost:5003/api/accounts\`)
.pipe(
mergeMap(response => response.data),
filter(response => filerFunction(response)),
finalize(()=>{console.log(“stop spinner in this function”)})
)
.subscribe(
response => this.tableData.push(response),
error => console.log(error),
() => console.log(“or stop spinner in this function”)
);

when using bootstrap vue.js and am trying to animate/transition the drop downs. This is proving to be fairly difficult as they do not use v-if or v-show so the transition will not work. Alternatively because the way the components work if you use v-if the drop down trigger will be hidden. I can’t find anything online to bootstrap vue.js specifically on this but I feel this shouldn’t be as tough as it has turned out to be. thanks for any help you can give

<div id=”app”>
<b-navbar type=”dark” fixed>
<b-navbar-nav class=”ml-auto”>

<b-nav-item-dropdown text=”Tools”>
<b-dropdown-item to=”/navItem1”>Item 1</b-dropdown-item>
<b-dropdown-item to=”/export”> Item 2</b-dropdown-item>
</b-nav-item-dropdown>

// This won’t work as it hides the main dropdown trigger right form the start
<b-nav-item-dropdown text=”Tools” v-if=”toggleDropdown”>
<b-dropdown-item to=”/navItem1”>Item 1</b-dropdown-item>
<b-dropdown-item to=”/export”> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-navbar>
</div>

<script>
export default {
name: ‘nav’,
data () {
return { toggleDropdown: false }
},
mounted: function () {
// I can listen for events here but I still can’t trigger the transition
this.$root.$on(‘bv::dropdown::show’, bvEvent => {
this.toggleDropdown = true
})

this.$root.$on(‘bv::dropdown::hide’, bvEvent => {
this.toggleDropdown = false
})
}
}
</script>

<style lang=”scss”>
.navbar {
.dropdown-menu {
transform-origin: top;
transition: transform 10s ease-in-out;;
}
}

.dd-slide-enter,
.dd-slide-leave-to { transform: scaleY(0); }

</style>

Solution :

It’s pretty hard to achieve a clean slide-up/down animation because Bootstrapvue.js uses display:none/block to hide/show the dropdown menu. What you can do it’s manipulate the max-height of the element as explained here.

I added an ‘animated’ class to the parent element, for example the b-navbar to select which dropdown has to be animated. Then i removed display: none from the default status of the dropdown and hidden it setting its max-height and padding to 0 and its border to none. When you click the button the dropdown gets the class ‘show’so you can give it a max-height different than 0, as explained in the answer i’ve linked to you, you have to set it higher than the actual height of the dropdown menu otherwise it gets cropped out.

.animated {
.dropdown-menu {
overflow: hidden;
display: block!important;
max-height: 0!important;
&:not(.show) {
padding: 0;
border: none;
}
&.show {
transition: max-height 300ms ease-in-out;
max-height: 500px!important; //this must have to be higher than the max height of the dropdown list
}
}
}