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" },
],
}
Related
this my model app
import mongoose, { mongo, Schema } from "mongoose";
const app = mongoose.Schema({
'name':{
type: String
},
'parent':{
type: String
},
'order':{
type:Number
},
'path':{
type: String,
},
'accesses': [
{
type: mongoose.Schema.Types.ObjectId,
ref: "Accesses"
}
]
},
{ timestamps: true },);
export default mongoose.model('Apps',app);
this my model accesses
import mongoose, { mongo } from "mongoose";
const accesses = mongoose.Schema({
'name':{
type: String,
require: true
},
'app':[{
type: mongoose.Schema.Types.ObjectId,
ref: "Apps"
}]
},
{ timestamps: true },);
export default mongoose.model('Accesses',accesses);
this my controller
export const saveApp = async (req,res) => {
try {
const app = new App(req.body);
const accesses = app.accesses;
let newAccs = [];
for (const acc of accesses)
{
const newAcc = await Accesses.findById(acc._id)
newAccs.push(newAcc);
}
app.accesses = newAccs;
const result = await app.save()
res.status(201).json(result);
} catch (error) {
res.status(400).json({message: error.message});
}
}
this my client.rest
POST http://localhost:3000/app
Content-Type: application/json
{
"name": "Ads Management testing",
"parent": "null",
"order": 1,
"path": "ads-management/",
"accesses": "63689567eee823ff6f39e969"
}
this my result
{
"name": "Ads Management testing",
"parent": "null",
"order": 1,
"path": "ads-management/",
"accesses": [
{
"app": [],
"_id": "63689567eee823ff6f39e969",
"name": "rejected",
"createdAt": "2022-11-07T05:19:35.590Z",
"updatedAt": "2022-11-07T05:19:35.590Z",
"__v": 0
}
],
"_id": "636a09d82ea451f510a56534",
"createdAt": "2022-11-08T07:48:40.035Z",
"updatedAt": "2022-11-08T07:48:40.035Z",
"__v": 0
}
my expecting data nested like this
why in my mongose accesses just put an id not all of object
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"),
},
]
};
}
}
I use Axios to display a JSON data and I have succeeded. But I want to show an object based on date and time, it shows now all data and I need to filter it.
So I want to look at today's date and show the object based on that, so I want to show the next upcoming event. (24/05/2020)
What I currently have:
Json:
{
"doc": [
{
"data": {
"events": {
"18807612": {
"_dt": {
"_doc": "time",
"time": "18:45",
"date": "14/05/20",
"tz": "UTC",
"tzoffset": 0,
"uts": 1566067500
},
"week": 33,
"teams": {
"home": {
"name": "name 1",
"mediumname": "name1",
"uid": 3014
},
"away": {
"name": "name 2",
"mediumname": "name 2",
"uid": 3020
}
}
},
"18807618": {
"_dt": {
"_doc": "time",
"time": "18:45",
"date": "24/05/20",
"tz": "UTC",
"tzoffset": 0,
"uts": 1566067500
},
"week": 33,
"teams": {
"home": {
"name": "name 1",
"mediumname": "name1",
"uid": 3014
},
"away": {
"name": "name 2",
"mediumname": "name2",
"uid": 3020
}
}
}
}
}
}
]
}
Store:
async loadPosts({ commit }) {
// Define urls pages
const urlEvents = 'http://api.example.com/302020';
// Set pages
const [
responseEvents
] = await Promise.all([
// Responses pages
this.$axios.get(urlEvents)
]);
// variables pages
this.events = responseEvents.data.doc[0].data.events
// mutations pages
commit('SET_EVENTS', this.events)
}
},
mutations: {
SET_EVENTS (state, events) {
state.events = events;
}
}
And to show the data I use this:
import {mapState} from 'vuex';
export default {
name: 'NextMatch',
mounted() {
this.$store.dispatch('loadPosts')
},
computed: {
...mapState([
'events'
])
}
}
<h1>{{events}}</h1>
But this shows all data, and what I try to get is the first upcoming event for the object with the "uid": 3014.
So I want to show the date, time and names of the home and away team.
How can I get the correct data by filtering the data?
Something like this or similar to this should work:
In your Vue component's <template>:
`<h1>{{selectedEvent._dt.date}}</h1>`
In your Vue component's <script>:
props: {
eventID: {
type: Number,
default: 3014
},
},
computed: {
...mapState([
'events'
]),
eventsArr(){
if (!this.events) return {} //make sure Object.entries gets object.
return Object.entries(this.events)
},
selectedEvent(){
const selectedArr = this.eventsArr.find(([eID, e]) => e.teams.home.uid === this.eventID)
return selectedArr[1]
}
}
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
}
]
}