reference : https://vuetifyjs.com/en/customization/internationalization#custom-components
If I run console.log(this.$vuetify.lang.t('$vuetify.selectProvince')) in method or mounted, it works. But if I run it on data, it does not works. for example :
data: () => ({
cards: [
{ id: 1, title: this.$vuetify.lang.t('$vuetify.selectProvince') },
],
})
How can I solve this problem?
Define a variable in the data function and point to the current Vue instance, then you can use it as follows:
data() {
const self = this
return {
cards: [
{ id: 1, title: self.$vuetify.lang.t('$vuetify.selectProvince') }
]
}
}
Related
I'm creating a recursive method in Nuxt, can I do it?
Here is my component:
<script>
export default {
data() {
return {
items: [],
auxitems: [],
}
},
methods: {
orderRecursive(items, auxitems) {
items.data.forEach((element) => {
auxitems.push(element)
})
if (items.child.length > 0) {
this.orderRecursive(items.child, auxitems)
} else {
//
}
},
},
}
</script>
The struct items is like:
items= [
data: [{array}],
child: [{data, child}]
]
My intention is order all data in one array, then, I can show in view.
My method orderRecursive() is not working, can you tell me why?
So I wanted to see if I can get some guidance from the community if there is a better way to approach this:
So I have the following vue.js app:
new Vue({
name: 'o365-edit-modal-wrapper',
el: '#o365-modal-edit-wrapper',
data: function() {
const default_apps = [
{
'post_title': 'Excel',
}, {
'post_title': 'Word',
}, {
'post_title': 'SharePoint',
}];
return {
available_list: [],
selected_list: default_apps.map(function(name, index) {
return { name: name.post_title, order: index + 1, fixed: false };
}),
}
},
computed: {
dragOptions() {
// Pass in additional <draggable> options inside the return for both lists.
return {
tag: 'div',
group: 'o365apps',
disabled: !this.editable,
ghostClass: "ghost",
};
},
},
});
The selected_list returns the following items:
I was told that it's bad practice to do array mapping inside the data return, but to instead map inside the computed call - Could someone lead me in the right direction and just see if my code makes sense?
I tried defining an empty array as shown below:
return {
available_list: [],
selected_list:[],
}
& then inside the computed property, I tried accessing it using the following return but wasn't getting any data back:
selected_list() {
return this.default_apps.map(function(name, index) {
return { name: name.post_title, order: index + 1, fixed: false };
});
},
All help is appreciated - Thanks a bunch!
your are almost there except for a few details:
It's ok to map data inside data as long as you put them inside the return object literal data() { return { default_apps: [] } }.
Once default_apps is inside the return object of data, you can access the data inside of it from a computed property using the this keyword: this.default_apps.map()...
new Vue({
name: 'o365-edit-modal-wrapper',
el: '#o365-modal-edit-wrapper',
data: function() {
return {
default_apps: [
{ post_title: 'Excel' },
{ post_title: 'Word' },
{ post_title: 'SharePoint'}
],
available_list: [],
}
},
computed: {
selected_list() {
return this.default_apps.map(function(name, index) {
return { name: name.post_title, order: index + 1, fixed: false };
});
},
dragOptions() {
// Pass in additional <draggable> options inside the return for both lists.
return {
tag: 'div',
group: 'o365apps',
disabled: !this.editable,
ghostClass: "ghost",
};
},
},
});
I want to display my getters in web but in console.log i have undefined errors. but in vue dev tool my getters are working.
my component code :
export default {
data: () => ({
items: [
{ text: 'Real-Time', icon: 'mdi-clock' },
{ text: 'Audience', icon: 'mdi-account' },
{ text: 'Conversions', icon: 'mdi-flag' },
],
}),
computed: {
Question(){
return this.$store.getters.getQuest
}
},
methods: {
Next(){
this.$store.commit('incrementIndex')
}
},
}
and this my vuex :
export default new Vuex.Store({
state: {
question: [],
index: 0
},
getters: {
getQuest: state => {
let a = state.question[state.index]
let answer = [...a.incorrect_answers, a.correct_answer]
return {
question: a,
answer: answer
}
}
},
In the getter you need to check whether all information is loaded yet. So this is roughly what I'd do:
export default new Vuex.Store({
state: {
question: [],
index: 0
},
getters: {
getQuest: state => {
let a = state.question[state.index]
if (a){
let answer = [...a.incorrect_answers, a.correct_answer]
return {
question: a,
answer: answer
}
} else {
return null
}
},
You are getting undefined errors because initially question is an empty array.
So state.question[state.index] is basically undefined
And then you are trying to access property incorrect_answers of undefined which will not work and will give undefined errors
I am using https://github.com/r3code/vue-vis-network
I am getting error: Cannot read property 'hasChildNodes' of undefined
My component code is:
<template>
<el-container >
<el-main>
<network ref="network" :nodes="nodes" :edges="edges" :options="options"> </network>
<button #click="get_data">GetData</button>
</el-main>
</el-container>
</template>
<script>
export default {
components: { Notification },
data () {
return {
nodes: [],
edges: [],
options: []
}
},
methods:
{
get_data()
{
axios.get(base_url + '/graph')
.then((response) => {
this.nodes = response.data.nodes;
this.edges = response.data.edges;
}).catch((error) => { console.log(error); });
}
},
}
</script>
index.js:
Vue.component('network', new vueVisNetwork.Network);
I suppose that there is problem that it's attempt to access to data placed in #app. How I can say him that he should use data declared in component?
Actual data example:
nodes : [
{id: 1, label: 'Fooo"', group: "company"},
{id: 2, label: 'Baaar', group: "owner"},
],
edges : [
{from: 1, to: 2},
],
possible related issue https://github.com/crubier/react-graph-vis/issues/57
Currently I have solved things in an other way, but I am still curious why this is not working.
I'm trying to render a transition with a template with 2 directives, but it seems it tries to resolve the attrs/props from an other scope, but I can't see why at this point. Perhaps I just made a stupid mistake.
This gives me the error:
"[Vue warn]: Failed to resolve directive: ..." for both bind and text
<script>
import Step from './Step';
export default {
data() {
return {
pointer: 0,
steps: [],
}
},
render(createElement) {
this.steps = this.$slots.default
.filter(vnode => vnode.tag && vnode.tag.indexOf(Step.name) > -1);
this.pointer = this.steps[0].key;
return createElement('div',
{},
[
createElement('transition',
{},
[
createElement('template', {
directives: [
{name: 'bind', arg: 'key', value: 'pointer'},
{name: 'text', value: 'step'},
],
})
]
)
]);
},
computed: {
step() {
return _.find(this.steps, step => step.key === this.pointer);
}
},
methods: {
next() {
++this.pointer;
}
}
}
</script>