I have a vue-multiselect instance that I'm trying to map in a way where I can take the value from the 'contact_data' index of the array I'm passing into the options and store it into an array without the index name. Basically, I need my copyUsers array to look like:
0:
"email#mail.com"
1:
"new#mail.com"
But right now it's:
0:
"contact_data":"email#mail.com"
Anyway, I've used the spread operator on my response.data object which initially got the options into my multiselect, but now I've tried to map the index of my options to only push the value into the array but it's not working and now I'm not even getting any options to show up in my multiselect.
What am I doing wrong here?
<multiselect
v-model="copyUsers"
#search-change="val => searchCopiedUsers(val)"
:options="copyUsersOptions.map(i => i.contact_data)" //changed this from copyUsersOptions
:multiple="true"
:loading="loading"
placeholder="Enter user(s) to be copied"
label="contact_data"
track-by="contact_data">
</multiselect>
data() {
return {
loading: false,
copyUsers: [],
copyUsersOptions: [],
}
},
methods: {
searchCopiedUsers: function(val) {
console.log('searched for', val);
if (val) {
this.loading = true;
axios.get('/ticket/users/search',{params: {query: val}})
.then(response => {
this.copyUsersOptions = [...response.data];
console.info(this.copyUsersOptions);
console.log('here are the users');
console.log(this.copyUsers);
})
.catch(function(error) {
this.loading = false;
// handle error
console.log(error)
})
.finally(function() {
this.loading = false;
})
} else {
this.copyUsersOptions = [];
}
}
}
}
UPDATE: Full object if I dump response.data
1: {contact_data: "test#mail.com"}
2: {contact_data: "johndoe#msn.com"}
3: {contact_data: "res#gmail.com"}
4: {contact_data: "info#globe.net"}
5: {contact_data: "testing#yahoo.com"}
I see what is going on, when I answered you yesterday I did not have a clear understanding of what your data looks like.
Now understanding that your response data looks something like this
{
1: { contact_data: "test#mail.com" },
2: { contact_data: "johndoe#msn.com" },
3: { contact_data: "res#gmail.com" },
4: { contact_data: "info#globe.net" },
5: { contact_data: "testing#yahoo.com" },
}
I can see that it is an object of objects. In order to transform this into an array. We will get an array of all the keys in that object using Object.keys().
From the data given this will return
[ 1, 2, 3, 4, 5]
Then we will use map() to iterate over the array from Object.keys() to create an array of contact_data.
Object.keys(response.data)
.map((key) => response[key].contact_data)
Here is a sandbox
Putting it all together, your Axios call would then become
axios.get('/ticket/users/search',{params: {query: val}})
.then(response => {
this.copyUsersOptions = Object.keys(res.data)
.map((key) =>
response.data[key].contact_data
)
console.info(this.copyUsersOptions);
console.log('here are the users');
console.log(this.copyUsers);
})
Related
I have this app that I'm working on that is using RTK and in the documentation for selecting values from results, in queries using RTK Query, they have an example with a createSelector and React.useMemo. Here's that code and the page
import { createSelector } from '#reduxjs/toolkit'
import { selectUserById } from '../users/usersSlice'
import { useGetPostsQuery } from '../api/apiSlice'
export const UserPage = ({ match }) => {
const { userId } = match.params
const user = useSelector(state => selectUserById(state, userId))
const selectPostsForUser = useMemo(() => {
const emptyArray = []
// Return a unique selector instance for this page so that
// the filtered results are correctly memoized
return createSelector(
res => res.data,
(res, userId) => userId,
(data, userId) => data?.filter(post => post.user === userId) ?? emptyArray
)
}, [])
// Use the same posts query, but extract only part of its data
const { postsForUser } = useGetPostsQuery(undefined, {
selectFromResult: result => ({
// We can optionally include the other metadata fields from the result here
...result,
// Include a field called `postsForUser` in the hook result object,
// which will be a filtered list of posts
postsForUser: selectPostsForUser(result, userId)
})
})
// omit rendering logic
}
So I did the same in my app, but I thought that if it's using the createSelector then it can be in a separate slice file. So I have this code in a slice file:
export const selectFoo = createSelector(
[
(result: { data?: TypeOne[] }) => result.data,
(result: { data?: TypeOne[] }, status: TypeTwo) => status,
],
(data: TypeOne[] | undefined, status) => {
return data?.filter((d) => d.status === status) ?? [];
}
);
Then I created a hook that uses this selector so that I can just pass in a status value and get the filtered results. This is in another file as well.
function useGetFooByStatus(status: WebBookmkarkStatus) {
const selectFooMemoized = useMemo(() => {
return selectFoo;
}, []);
const { foos, isFetching, isSuccess, isError } =
useGetFoosQuery(
"key",
{
selectFromResult: (result) => ({
isError: result.isError,
isFetching: result.isFetching,
isSuccess: result.isSuccess,
isLoading: result.isLoading,
error: result.error,
foos: selectFooMemoized(result, status),
}),
}
);
return { foos, isFetching, isSuccess, isError };
}
Then lastly I'm using this hook in several places in the app.
The problem then is when I'm causing a re-render in another part of the app causes the query hook to run again (I think), but the selector function runs again, not returning the memoized value, even though nothing has changed. I haven't really figured it out what causes the re-render in another part of the app, but when I do the following step, it stops re-rendering.
If I replace the selector function in the useGetFooByStatus with the same one in the slice file. With this, the value is memoized correctly.
(Just to remove any doubt, the hook would look like this)
function useGetFooByStatus(status: TypeTwo) {
const selectFooMemoized = useMemo(() => {
return createSelector(
[
(result: { data?: TypeOne[] }) => result.data,
(result: { data?: TypeOne[] }, status: TypeTwo) =>
status,
],
(data: TypeOne[] | undefined, status) =>
data?.filter((d) => d.status === status) ?? []
);
}, []);
const { foos, isFetching, isSuccess, isError } =
useGetFoosQuery(
"key",
{
selectFromResult: (result) => ({
isError: result.isError,
isFetching: result.isFetching,
isSuccess: result.isSuccess,
isLoading: result.isLoading,
error: result.error,
foos: selectFooMemoized(result, status),
}),
}
);
return { foos, isFetching, isSuccess, isError };
}
Sorry for the long question, just want to try and explain everything :)
Solution 1 has one selector used for your whole app. That selector has a cache size of 1, so if you call it always with the same argument it will not recalculate, but if you call it with 1 and then with 2 and then with 1 and then with 2 it will always recalculate in-between and always return a different (new object) as a result.
Solution 2 creates one such selector per component instance.
Now imagine two different components calling these selectors - with two different queries with two different results.
Solution 1 will flip-flop and always create a new result - solution 2 will stay stable "per-component" and not cause rerenders.
Does the following work:
const EMPTY = [];
const createSelectFoo = (status: TypeTwo) => createSelector(
[
(result: { data?: TypeOne[] }) => result.data,
],
(data: TypeOne[] | undefined) => {
return data?.filter((d) => d.status === status) ? EMPTY;
}
);
function useGetFooByStatus(status: TypeTwo) {
//only create selector if status changes, this will
// memoize the result when multiple components
// call this hook with different status in one render
// cycle
const selectFooMemoized = useMemo(() => {
return createSelectFoo(status);
}, [status]);
const { foos, isFetching, isSuccess, isError } =
useGetFoosQuery(
"key",
{
selectFromResult: (result) => ({
isError: result.isError,
isFetching: result.isFetching,
isSuccess: result.isSuccess,
isLoading: result.isLoading,
error: result.error,
foos: selectFooMemoized(result),
}),
}
);
return { foos, isFetching, isSuccess, isError };
}
You may want to make your component a pure component with React.memo, some more information with examples of selectors can be found here
I'm trying delete data but I'm getting this error:
this.jobPosts.filter is not a function
PostJobIndex.vue file:
deleteJobPost: async function(jobPost) {
if (!window.confirm('Are you sure you want to delete this Job Post?')) {
return;
}
try {
await employerService.deleteJobPost(jobPost.id);
this.jobPosts = this.jobPosts.filter(obj => {
return obj.id != jobPost.id;
});
console.log(this.jobPosts);
this.$toast.success("Job Post deleted Successfully!");
} catch (error) {
console.log(error);
this.$toast.error(error.response.data.message);
}
},
I had this same issue with my Update method and I beleive it was because I was trying to map through an object or something instead of an array. In the end I used Object.keys(this.jobPosts).map for my update method and it worked:
Object.keys(this.jobPosts).map(jobPost => {
if (jobPost.id == response.data.id) {
for (let key in response.data) {
jobPost[key] = response.data[key];
}
}
});
But when I do this for Update it doesn't work:
this.jobPosts = Object.keys(this.jobPosts).filter(obj => {
return obj.id != jobPost.id;
});
UPDATED
Here is the code for loading the job posts:
loadJobPosts: async function() {
try {
const response = await employerService.loadJobPosts();
this.jobPosts = response.data;
console.log(this.jobPosts);
} catch (error) {
this.$toast.error('Some error occurred, please refresh!');
}
},
Im using Vuex for state management and I'm using services, that simply contain the axios http requests. That's where this line comes from employerService.loadJobPosts() loadJobPosts() is a function inside my employerService.js file.
I'm also using Laravel for my back end. Here is my JobPostsController.php file:
public function index()
{
$jobPosts = JobPost::all()->where('user_id', Auth::user()->id);
return response()->json($jobPosts, 200);
}
From what I've understood from your code,
this should work for removing jobPost from jobPosts
this.jobPosts = this.jobPosts.filter(obj => {
return obj.id != jobPost.id;
});
I don't know what you're expecting this to do, but it won't do anything useful and will either error or return false for everything.
this.jobPosts = Object.keys(this.jobPosts).filter(obj => {
return obj.id != jobPost.id;
});
filter exists on array types, so I would check where it's getting set and make sure it's an array.
I've included a small snippet in case it's any help.
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: "#app",
data: () => {
return {
jobPosts: [],
deleteJobId: 1
};
},
methods: {
getJobPosts() {
this.jobPosts = [{
id: 1
}, {
id: 2
}, {
id: 3
}, {
id: 4
}, {
id: 5
}];
},
deleteJob() {
if (!this.deleteJobId)
return;
this.jobPosts = this.jobPosts.filter(x => x.id !== this.deleteJobId);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" #click="getJobPosts">Get Jobs</button>
<div>
<button type="button" #click="deleteJob">Delete Job #</button>
<input type="number" v-model.number="deleteJobId" />
</div>
<ul>
<li v-for="jobPost in jobPosts">
Job Post #{{jobPost.id}}
</li>
</ul>
</div>
You have already answered your own question:
in my data() object, I have this jobPosts: [], but in the console it says Object
As for your second question:
I don't know how to return the data as an array
There are similiar topics here on SO.
I am not familiar with Laravel but assuming you have an eloquent model with JobPost in your index-function according to the docs you should use the .toArray-method:
$jobPosts = JobPost::all()->where('user_id', Auth::user()->id).toArray();
When working with plain collections the values method should do the trick of returning an array instead of an object:
$collection = collect([
10 => ['product' => 'Desk', 'price' => 200],
11 => ['product' => 'Desk', 'price' => 200]
]);
$values = $collection->values();
$values->all();
UPDATE
I just realized that your result is just a stringified JSON object that needs to be converted into an array. Just parse it before processing (take out the JSON.parse(...) if you are already taking care of it in your service), return the object properties as an array and you are good to go:)
this.jobPosts = Object.values(JSON.parse(this.jobPosts)).filter(obj => {
return obj.id != jobPost.id;
});
I set an empty array inside a state
const state = {
jobs: []
}
Inside the component, I dispatch an action and the code looks like this:
created(){
this.$store.dispatch('viewJobs');
}
The viewJobs actions looks like the following:
viewJobs: ({commit}) => {
axios.get('/api/jobs')
.then(res => {
const jobss = res.data;
console.log(jobss);
commit('LIST_JOBS', jobss);
})
.catch(error => console.log(error));
}
And then the mutations looks like this:
'LIST_JOBS'(state, jobss){
state.jobs.push(jobss);
}
From the laravel side, my controller looks like this:
$jobs = Employment::all();
return $jobs->toJson(JSON_PRETTY_PRINT);
When I load the page, am able to console log jobss, but the state does not get updated.
How can I successfully push the data to the state?
You are adding the entire array as a single element of state.jobs. Instead, you can use the Javascript spread operator, to push each element from the array:
state.jobs.push(...jobss)
Try to use response()->json()
return response()->json(Employment::all(),200);
and try use {jobss:jobss} in commit section
viewJobs: ({commit}) => {
axios.get('/api/jobs')
.then(res => {
const jobss = res.data;
console.log(jobss);
commit('LIST_JOBS', {jobss:jobss});
})
.catch(error => console.log(error));
}
Another way, your vuex store looks like this
// state
export const state = () => ({
items: []
})
// getters
export const getters = {
items: state => state.items
}
// mutations
export const mutations = {
SET_ITEMS (state, { items }) {
state.items = items
},
PUSH_ITEM (state, { item }) {
state.items.push(item)
},
UPDATE_ITEM (state, { index, item }) {
state.items[index] = item
},
DELETE_ITEM: (state, index) => {
state.items.splice(index.index, 1);
}
}
// actions
export const actions = {
setItems ({ commit }, { items }) {
commit('SET_ITEMS', { items })
},
pushItem ({ commit,state }, { item }) {
commit('PUSH_ITEM', { item })
},
deleteItem ({ commit,state }, { index }) {
commit('DELETE_ITEM', { index })
},
updateItem ({ commit,state }, { index,item }) {
commit('UPDATE_ITEM', { index,item })
},
}
Then in your component call your action
this.$axios.$get('/api/jobs')
.then(res => {
const jobss = res.data;
console.log(jobss);
this.$store.dispatch('your_store_name/setItems', {items:jobss});
})
.catch(error => console.log(error));
"vue-rx": "^6.1.0",
"rxjs": "^6.4.0",
"vue": "^2.5.17",
I'm new in vue-rx and rxjs,But when I see several demo of rx, I'm quite interested in this.So I want to use it in my project which posts a request when attribute num will not change anymore
[
{
id: 0,
name: 'giftA',
num: 0 // will turn to 1,2,3,4,5,...after running `send({id: 0})` function 1,2,3,4,5,...times
},
{
id: 1,
name: 'giftB',
num: 0
},
...
]
And Here is my solution:
using $watchAsObservable to watch the change of sendCalledTimes, and then using mergeMap to post the request.
the variable sendCalledTimes is a number which will sendCalledTimes++ when called send function, And after posting the request, reset this to sendCalledTimes = 0.
So that $watchAsObservable('sendCalledTimes')(vue-rx) will execute every three seconds, and will reduce request times in my project. But i think it's still not good because it just like a timer and can't watch weather num of each object in the Array changes. The good example should be like this search example.
data() {
return {
sendCalledTimes: 0,
giftArr: []
}
},
created() {
this.$watchAsObservable('sendCalledTimes').pipe(
pluck('newValue'),
filter(val => val > 0),
debounceTime(3000),
// if `sendCalledTimes` is the same number as previous
// will not execute follows
// distinctUntilChanged(),
mergeMap(
(val) => this.requestSendGift()
),
).subscribe(
(val) => { }
)
},
methods: {
send (obj) {
let pushFlag = true
for (const gift in this.giftArr) {
if (gift.id === obj.id) {
gift.num++
pushFlag = false
break
}
}
if (pushFlag) {
this.giftArr.push(obj)
}
// observable
this.sendCalledTimes++
},
async requestSendGift () {
for (const gift in this.giftArr) {
// example for post a request to store each gift
await axios({
data: gift,
type: 'post',
url: '...'
}).then(res => { ... })
}
// reset `this.sendCalledTimes`
this.sendCalledTimes = 0
}
}
Also since vue-rx doesn't have many examples on github, so i need help to solve creating good subscription for this situation.
I have tried this, but failed:
data () {
return {
giftArr: []
}
},
subscriptions: {
test: from(this.giftArr) // console.log(this.$observables.test) throw an error: typeError: Cannot read property 'giftArr' of undefined
},
It would be greatly appreciated if anyone can help me to solve this question.
It's a little unclear from your question exactly what you're trying to do, but I've created an example based on what I believe to be your intent.
I made some assumptions:
You have a 'gifts' array that represents all of the gifts that will ever exist.
You want to make updates to that array.
Every time you make an update to the array, you want to see the update in the form of an Observable emitting an event.
Use a Subject
I think what you want is a Subject.
const gift$ = new Subject();
Make it Emit on Updates
And you would set it up to emit every time you increment num or add a new gift.
function addGift(gift) {
gifts.push(gift);
gift$.next(gift);
}
function incrementGift(gift) {
gift.num++;
gift$.next(gift);
}
All together it could look something like this:
import { Subject } from 'rxjs';
const gift$ = new Subject();
const gifts = [{ id: 0, name: 'giftA', num: 0 }, { id: 1, name: 'giftB', num: 0 }];
function addGift(gift) {
gifts.push(gift);
gift$.next(gift);
}
function incrementGift(gift) {
gift.num++;
gift$.next(gift);
}
function sendGift(newGift) {
const currentGift = gifts.find(g => g.id === newGift.id);
currentGift ? incrementGift(currentGift) : addGift(newGift);
}
gift$.subscribe(update => {
console.log(gifts);
console.log(update);
});
// You should see an initial logging of 'gifts' and update will be 'undefined' at first. Then you'll see a log for every 'sendGift'.
sendGift({ id: 0 });
sendGift({ id: 3, name: 'giftC', num: 0 });
StackBlitz
i am making vue application i want to add more data which is fetching through laravel return in array without loosing old data
my methods is
getData () {
axios.get('get/users')
.then(response => {
this.queue = response.data.users
})
.catch(e => {
this.errors.push(e)
})
}
and my data
data: function () {
return {
queue: []
}
},
Full Script is
data: function () {
return {
queue: []
}
},
created () {
this.getData()
},
methods: {
getData () {
axios.get('get/users')
.then(response => {
this.queue = response.data.users
})
.catch(e => {
this.errors.push(e)
})
},
decide (choice) {
this.$refs.tinder.decide(choice)
},
submit (choice) {
switch (choice) {
case 'nope': // 左滑
break;
case 'like': // 右滑
break;
case 'super': // 上滑
break;
}
if (this.queue.length < 2) {
this.getData()
}
}
}
here is video link
https://youtu.be/iv82EGMD4XA
i want when queue have 2 data left trigger this.getData()
fetch users and add array data to queue without loosing old queue data
You can use the concat function
this.queue = this.queue.concat(response.data.users);
In the axios response
Instead of the
this.queue = response.data.users