in a normal way with out translation but i want to translate the two object array and bind into a component
<InfoNews
v-for="infonew in infonews"
:id="infonew.id"
:title="infonew.title"
:content="infonew.content"
/>
data() {
return {
infonews: [
{
id: "01",
title: "what we do",
content:"industke aecimen book. ",
},
{
id: "02",
title: "our mission",
content:"ggdddg",
},
],
};
Make infonews a computed property. The title and content of each should be the translation keys.
export default {
computed: {
infonews() {
return [
{
id: "01",
title: this.$t("what we do"),
content: this.$t("industke aecimen book"),
},
{
id: "02",
title: this.$t("our mission"),
content: this.$t("ggdddg"),
},
]
};
}
}
Related
I have this state object, with default values
state() {
return {
projects: [
{ code: "01", name: "test" },
{ code: "01", name: "test" },
{ code: "01", name: "test" },
],
};
},
and I'm trying to replace it with payload that came from actions,
mutations: {
setProject(state,payload) {
state.projects = payload;
}
},
The problem is it doesn't replace the state.projects object when im trying to use console.log
i am using vuex 3.6.2 my payload is like this
[
{ code: "01", name: "Picture" },
{ code: "02", name: "Perfect" },
],
Try state being an object not a function. E.g.
const state = {
projects: [
{ code: "01", name: "test" },
{ code: "01", name: "test" },
{ code: "01", name: "test" },
],
}
Please help to return filteredList() based on comparing for similarity input search with key 'info': array.
It always says its undefined.
export default {
data() {
return {
search: "",
postList: [
{
title: "hello",
info: ["one", "two", "three", "four"],
},
{
title: "goodbye",
info: ["five", "six"],
},
],
};
},
computed: {
filteredList() {
return this.postList.filter((item) => {
return item.info.includes(this.search);
});
},
},
};
</script>
I'm trying to change the links based on the variable user_role which is stored in Vuex(store). I'm not able to find an appropriate way to track the change and based on its value I want to perform some method. Any suggestions on how to do it?
------------------------------store.js-------------------------------
export default new Vuex.Store({
state: {
user_role: "User"
},
mutations: {},
actions: {},
modules: {}
});
-----------------------------------component.vue---------------------------
export default {
name: "Navbar",
data() {
return {
links: [
{ text: "Projects", route: "/projects" },
{ text: "Requests", route: "/requests" },
{ text: "", route: "" },
{ text: "Resources", route: "/resources" }
],
pers_actions: ["Profile", "LogOut"],
};
},
watch: {
user_role: {
if (user_role === "PM") {
this.links[2] = {
text: "Allocations",
route: "/allocations"
};
} else if (user_role === "PMO") {
this.links[2] = {
text: "Reports",
route: "/reports"
};
} else if (user_role === "User") {
this.links = [
{
text: "Allocations",
route: "/allocations"
}
];
}
}
},
Rather than explicitly mutating your local data in response to some state change, it is better to compute your links within a computed property because it will automatically update whenever some dependent data has changed. It'll "just work".
computed: {
links() {
switch (this.$store.state.user_role) {
case: "PM": return [
{ text: "Projects", route: "/projects" },
{ text: "Requests", route: "/requests" },
{ text: "Allocations", route: "/allocations" },
{ text: "Resources", route: "/resources" },
];
case: "PMO": return [
{ text: "Projects", route: "/projects" },
{ text: "Requests", route: "/requests" },
{ text: "Reports", route: "/reports" },
{ text: "Resources", route: "/resources" },
];
// For any other role
default: return [
{ text: "Allocations", route: "/allocations" },
];
}
}
}
I want to fetching data from JSON using Dropdown lib,
but I can't display these JSON.
Here's the code I have tried:
this.state = {"diagnosis": {
"type": [
"Oncology",
"Hip And Knee"
],
"kode": [
"123",
"321",
"3232",
"1231"
],
"PrimaryCat": [
"contoh1",
"contoh2",
"contoh3"
],
"Location": [
"jakarta",
"bogor",
"depok",
"tangerang",
"bekasi"
],
"Encountrace": [
"kga",
"tau",
"isi",
"menunya"
],
"fracture": [
"ini",
"juga",
"kaga",
"tau",
"isinya"
],
"healing": [
"yang",
"pasti",
"penyembuhan"
]
}}
render() {
let data = [{
value: 'Banana',
}, {
value: 'Mango',
}, {
value: 'Pear',
}];
return (
<View>
<Dropdown
label="testing"
data={this.state.diagnosis.type}
/>
</View>
);
}
}
with above code, the dropdown just displaying two rows of type, but the name of oncology or hip and knee doesn't show,
here's the example screen:
Am I doing something wrong?
This will work if you change your json in following format,
this.state = {"diagnosis": {
"type": [
{
value: "Oncology",
}, {
value: "Hip And Knee"
}
],
rest of the formats will be as above.
If you do not want to change the format of your json then, you have to do minor changes in your react-native-material-dropdown code,
Please go to this path,
react-native-material-dropdown->src->components->dropdown->index.js
Please do some changes in index.js, change your valueExtractor function like this way,
valueExtractor: ( value = {}, index) => value,
Hope it helps to you.
try following.
{"diagnosis": {
"type": [
{
value: "Oncology"
},
{
value: "Hip And Knee
}
],
"kode": [
{
value: "123"
},
{
value: "321"
},
{
value: "3232"
},
{
value: "1231
}
],
"PrimaryCat": [
{
value: "contoh1"
},
{
value: "contoh2"
},
{
value: "contoh3
}
],
"Location": [
{
value: "jakarta"
},
{
value: "bogor"
},
{
value: "depok"
},
{
value: "tangerang"
},
{
value: "bekasi
}
],
"Encountrace": [
{
value: "kga"
},
{
value: "tau"
},
{
value: "isi"
},
{
value: "menunya
}
],
"fracture": [
{
value: "ini"
},
{
value: "juga"
},
{
value: "kaga"
},
{
value: "tau"
},
{
value: "isinya
}
],
"healing": [
{
value: "yang"
},
{
value: "pasti"
},
{
value: "penyembuhan
}
]
}
I have a Vue route I've set up to show courses in a degree program at a school.
{
path: '/courses-by-degree/:degree',
components: {
sidebar: Sidebar,
content: Grid
},
props: {
sidebar: {
title: "Fulfills",
type: "all",
degree: "",
keyword: ''
},
content: {
type: "degree",
degree: "English",
keyword: "",
columns: {
"Title": "title",
"Term": "term_description",
"Day, Time": "",
"Format": "format",
"Capacity": "availability"
}
}
}
}
You can access this via a URL or via a Vue multiselect:
<multiselect
v-model="degree"
placeholder="Select a field..."
:options="degrees"
#select="searchDegrees">
</multiselect>
When you select an option in the multiselect, this is called:
searchDegrees(selectedOption, id) {
this.$root.$router.push({ path: `/courses-by-degree/${selectedOption}` });
},
My question is, how can I pass the selected option in the path to the props in the route, instead of hardcoding it to "English" as I've done above? Is this even possible/a good way to do this?
You are correct, you need to use the function to return the props. In the case of multiple named components, you can do that like this:
{
path: '/courses-by-degree/:degree',
components: {
sidebar: Sidebar,
content: Grid
},
props: {
sidebar: {
title: "Fulfills",
type: "all",
degree: "",
keyword: ""
},
content: route => {
return {
type: "degree",
degree: route.params.degree,
keyword: "",
columns: {
Title: "title",
Term: "term_description",
"Day, Time": "",
Format: "format",
Capacity: "availability"
}
}
}
}