I'm using i18n for localization in my project but whenever i change the language, all page's translate is okay except grid header names! Its getting normal when i refresh the page.How can fix this situation without refresh ?
You can fix this by calling the refreshHeader function on the reader API.
try this :
this.gridApi.refreshHeader();
where the gridApi is the API object you get from the onGridReady event params.
EDIT, how to get the gridApi :
the gridApi u get from the params of the onGridReady method being called by the AgGrid component.
if you are using reactJs, an attribute named onGridReady in your agGrid component would accept that function.
onGridReady = params => {
this.gridApi = params.api
this.gridColumnApi = params.columnApi
...
}
If you are using headerName, maybe try to use computed() function to get ColDef
Ex:
const colDef = computed(() => // coldef here)
Related
I am using the VUE JS code and trying to add the setAttribute to some of the tags.
Here is the code I am using :
changetab() {
const demoClasses = document.querySelectorAll(".delCon__select");
demoClasses.forEach(button => {
button.setAttribute("tabindex", "0");
});
return true;
},
but when I view in the code inspector, It does not show added to it, I have added the above function in computed.
template is like this :
<template>
<el-container class="orders"></el-download>
</template>
You need to make this type of request in Vue's Lifecycles, like: created or mounted.
Something like:
mounted() {
this.changetab()
}
Computed would not be the most appropriate place for this type of action.
I'm creating a component dynamically (after a button click), using this commonly followed tutorial. The basic code is:
import Building_Info from './Info_Zone/Building'
var Building_Info_Class = Vue.extend(Building_Info)
var building_info_instance = new Building_Info_Class()
console.log(building_info_instance)
bulding_info_instance.$mount()
place_to_add_component.$el.appendChild(bulding_info_instance.$el)
However, my Building_Info component requires a prop. How can I pass it in? Alternative ways to dynamically creare components are welcome, though ideally they'd support Single File Components.
Note: there are several SO questions about dynamic props, but none I see that speak to this question.
The constructor returned from Vue.extend (i.e., Building_Info_Class) can receive an initialization object, containing the propsData property with initial prop values:
var building_info_instance = new Building_Info_Class({
propsData: {
propA: '123',
propB: true,
}
})
demo
I am still new to Vue and have trouble with uing data from api within the script setup() of Vue3 composition api.
const data = computed(() => store.getters['projectSettings/getData']);
I get the data via store.getters return it and render it in the template. That works fine.
<cc-headline tag="h1">{{ data.name }}</cc-headline>
But if I want to use the same piece of data within setup() it is undefined
const data = computed(() => store.getters['projectSettings/getData']);
console.log(data.name)
What am I doing wrong?
If you want to print a computed property in the setup function you have to access it with console.log(data.value.name).
In the template it's working, because it automatically resolves to data.value if you render it via {{ data }}
Check the documentation to learn more: https://v3.vuejs.org/guide/composition-api-introduction.html#standalone-computed-properties
The solution was:
onUpdated(() => {
console.log(data.value.name)
})
It is no longer undefined and returns the value from the api
I am using Nuxt.js with Vuex and I would like to trigger a mutation when somebody enters in my web with a certain parameter (ex: https://example.com/?param=abc), and pass the parameter to a state.
I tried to check the documentation of the watchQuery property https://nuxtjs.org/api/pages-watchquery, but there’s no examples about how to do this, I just found this How to watch on Route changes with Nuxt and asyncData but I can’t see any way of how to write an action in Vuex store with watchQuery.
I tried writing:
actions: {
watchQuery: true,
asyncData ({ query, app }) {
const { start } = query
const queryString = start ? `?start=${start}` : ''
return app.$axios.$get(`apps/${queryString}`)
.then(res => {
commit('setParam',res.data);
})
},
}
But that syntax is not allowed.
Any help would be welcome, thanks in advance!
From my understanding watchQuery sets a watcher for query string, meaning it's waiting for the query to change while the page is already rendered making it possible to call methods like asyncData() again.
Since you only want to save a certain parameter when the user enters the page and then pass the paramater to a state you just need to move your asyncData method to a page from which you want to get the parameter, you will also need to extract store and query from the context automatically passed into asyncData and then using the store and query save the query parameter into your state.
Here is a simple demonstrantion
// Your page from which you want to save the param
export default {
asyncData({store, query}) { // here we extract the store and query
store.state.somethingForSavingTheParam = query.nameOfTheParamYouWantToSave
// instead of using store.state you could use store.commit(...) if that's what you want
}
}
I am trying to pass a function into recaptcha to be used as a callback. I need to write:
data-callback="function"
In Vue how do I add the function reference?
I've tried:
data-callback="{{ this.submitFocus }}"
data-callback="this.submitFocus"
I'm using Vue 2
Recaptcha2 uses the data-callback string to call a globally available function.
From what I can see in the documentation, it doesn't look like there's a programmatic way to set this so you might have to use something like this
beforeMount () {
window.submitFocus = () => { // using arrow function to preserve "this"
this.submitFocus()
}
},
beforeDestroy () {
delete window.submitFocus
}
with
data-callback="submitFocus"
in your template. The attribute value just needs to match the function added to window.
data-callback is an html attribute of a DOM element, it's just a string. It does not know about the context of your object instance, ie. this.
So, you can't use this when setting the attribute for your ReCaptcha, it will only understand functions that can be called without this.
If you had a function defined as
function submitFocus(){ ... }
globally, you could get ReCaptcha to call it by setting data-callback to submitFocus without the reference to this.
data-callback="submitFocus"