I have an upload component that submits after a message has been sent. In that component I have an action that states the request URL which is v-binded. However, every time I call the reference, the v-bind seems to not trigger and just gives me a blank. I'm using Element UI btw.
HTML
<el-upload :action="latestMessageAttachmentUrl" ref="uploadFiles"></el-upload>
JS
submitMessage () {
// Submit data to server
return api.createMessage( messageToSend, ( message ) => {
this.latestMessageAttachmentUrl = './messages/' + message.id + '/attachments';
this.$refs.uploadFiles.submit();
} );
}
Because Vue does not update View right update when data changes so you should submit in nextTick
submitMessage () {
// Submit data to server
return api.createMessage( messageToSend, ( message ) => {
this.latestMessageAttachmentUrl = './messages/' + message.id + '/attachments';
this.$nextTick(() => {
this.$refs.uploadFiles.submit();
})
} );
}
Related
I can't use the "save" method to save a change to my table data
I am using the "cellValueChanged" method to edit and save a table cell.
<ag-grid-vue :cellValueChanged="save"></ag-grid-vue>
methods: {
save() {
const method = this.instituicao.id ? 'put' : 'post'
const id = this.instituicao.id ? `/${this.instituicao.id}` : ''
axios[method](`${baseApiUrl}/instituicao${id}`, this.instituicao)
.then(() => {
this.$toasted.global.defaultSuccess()
this.reset()
})
.catch(showError)
},
Error message:
enter image description here
To achieve expected result, use event callback of #cell-value-changed
Change your event to #cell-value-changed = "save"
Use event callback to get old and new values of cell
save(event) {
console.log('onCellValueChanged: ' + event.oldValue + ' to ' + event.newValue);
}
Get required id value from that event callback and use it for POST call
I have a prop in a component that I want to pass with eventHub to a sibling component where I want to display the prop. However I can't make it to work and it always returns undefined.
<div class="user-menu">
{{getUsername != undefined ? 'Logged in as ' + getUsername + '!' : 'Not logged in'}}
</div>
computed: {
getUsername(){
var getUser;
this.$eventHub.$on('current-user', username => {
getUser = username
})
return getUser;
}
}
A computed property is not the right tool for the job here. You just need a data property:
data () {
return {
getUsername: null
}
},
created () {
this.$eventHub.$on('current-user', username => {
this.getUsername = username
})
}
Depending on how the event hub is created you would likely also need to remove the event listener when the component is destroyed.
I'm trying to render a list of notes and in that list I would like to include the note's user name based on the user_id stored in the note's table. I have something like this, but at the moment it is logging an error stating Cannot read property 'user_id' of undefined, which I get why.
My question is, in Vue how can something like this be executed?
Template:
<div v-for="note in notes">
<h2>{{note.title}}</h2>
<em>{{user.name}}</em>
</div>
Scripts:
methods:{
fetchNotes(id){
return this.$http.get('http://api/notes/' + id )
.then(function(response){
this.notes = response.body;
});
},
fetchUser(id){
return this.$http.get('http://api/user/' + id )
.then(function(response){
this.user = response.body;
});
}
},
created: function(){
this.fetchNotes(this.$route.params.id)
.then( () => {
this.fetchUser(this.note.user_id);
});
}
UPDATE:
I modified my code to look like the below example, and I'm getting better results, but not 100% yet. With this code, it works the first time it renders the view, if I navigate outside this component and then back in, it then fails...same thing if I refresh the page.
The error I am getting is: [Vue warn]: Error in render: "TypeError: Cannot read property 'user_name' of undefined"
Notice the console.log... it the returns the object as expected every time, but as I mentioned if refresh the page or navigate past and then back to this component, I get the error plus the correct log.
Template:
<div v-for="note in notes">
<h2>{{note.title}}</h2>
<em>{{note.user.user_name}}</em>
</div>
Scripts:
methods:{
fetchNotes(id){
return this.$http.get('http://api/notes/' + id )
.then(function(response){
this.notes = response.body;
for( let i = 0; i < response.body.length; i++ ) {
let uId = response.body[i].user_id,
uNote = this.notes[i];
this.$http.get('http://api/users/' + uId)
.then(function(response){
uNote.user = response.body;
console.log(uNote);
});
}
});
},
}
It looks like you're trying to show the username of each note's associated user, while the username comes from a different data source/endpoint than that of the notes.
One way to do that:
Fetch the notes
Fetch the user info based on each note's user ID
Join the two datasets into the notes array that your view is iterating, exposing a user property on each note object in the array.
Example code:
let _notes;
this.fetchNotes()
.then(notes => this.fetchUsers(notes))
.then(notes => _notes = notes)
.then(users => this.joinUserNotes(users, _notes))
.then(result => this.notes = result);
Your view template would look like this:
<div v-for="note in notes">
<h2>{{note.title}}</h2>
<em>{{note.user.name}}</em>
</div>
demo w/axios
UPDATE Based on the code you shared with me, it looks like my original demo code (which uses axios) might've misled you into a bug. The axios library returns the HTTP response in a data field, but the vue-resource library you use returns the HTTP response in a body field. Attempting to copy my demo code without updating to use the correct field would cause the null errors you were seeing.
When I commented that axios made no difference here, I was referring to the logic shown in the example code above, which would apply to either library, given the field names are abstracted in the fetchNotes() and fetchUsers().
Here's the updated demo: demo w/vue-resource.
Specifically, you should update your code as indicated in this snippet:
fetchInvoices(id) {
return this.$http.get('http://localhost/php-api/public/api/invoices/' + id)
// .then(invoices => invoices.data); // DON'T DO THIS!
.then(invoices => invoices.body); // DO THIS: `.data` should be `.body`
},
fetchCustomers(invoices) {
// ...
return Promise.all(
uCustIds.map(id => this.$http.get('http://localhost/php-api/public/api/customers/' + id))
)
// .then(customers => customers.map(customer => customer.data)); // DON'T DO THIS!
.then(customers => customers.map(customer => customer.body)); // DO THIS: `.data` should be `.body`
},
Tony,
Thank you for all your help and effort dude! Ultimately, with the help from someone in the Vue forum, this worked for me. In addition I wanted to learn how to add additional http requests besides the just the user in the fetchNotes method - in this example also the image request. And this works for me.
Template:
<div v-if="notes.length > 0">
<div v-if="loaded === true">
<div v-for="note in notes">
<h2>{{note.title}}</h2>
<em>{{note.user.user_name}}</em>
<img :src="note.image.url" />
</div>
</div>
<div v-else>Something....</div>
</div>
<div v-else>Something....</div>
Script:
name: 'invoices',
data () {
return {
invoices: [],
loaded: false,
}
},
methods: {
fetchNotes: async function (id){
try{
let notes = (await this.$http.get('http://api/notes/' + id )).body
for (let i = 0; notes.length; i++) {
notes[i].user = (await this.$http.get('http://api/user/' + notes[i].user_id)).body
notes[i].image = (await this.$http.get('http://api/image/' + notes[i].image_id)).body
}
this.notes = this.notes.concat(notes)
}catch (error) {
}finally{
this.loaded = true;
}
}
Given a selection made in a react-select (https://jedwatson.github.io/react-select/) I am using axios (https://github.com/mzabriskie/axios) to grab data from a remote url in order to populate a second react-select on the page.
The trick, which is where I think my use case differs from the Async examples, is that I don't want the user to have to type at all into the second select to trigger the auto-populating. I want that auto-population to happen immediately when the data returns from the AJAX call
I have confirmed that I'm grabbing the remote data correctly, but I can't quite figure out the correct syntax for the loadOptions parameter to the react-select. the closest example in the code to what I want is in this function from the project's examples
https://github.com/JedWatson/react-select/blob/master/examples/src/components/GithubUsers.js#L36
thanks for any tips you can offer
It looks like you're trying to do a related select type of scenario, where additional arguments are passed that the second select would use, and you require new options on open.
I did this (with the current build) by overriding AsyncSelect and adjusting my loadOptions.
import Select from 'react-select/lib/Async';
export default class AsyncSelect extends Select {
/**
* reload()
* Called when optional load arguments change, to reload the
* data from remote source with new options
* loadOptions={
* (inputValue) => this.props.loadOptions(
* inputValue,
* this.props.loadArguments
* )
* }
*/
reload() {
this.loadOptions('', options => {
const isLoading = !!this.lastRequest;
this.setState({ defaultOptions: options || [], isLoading });
});
}
componentWillReceiveProps(nextProps) {
// if the cacheOptions prop changes, clear the cache, force a reload
if (nextProps.cacheOptions !== this.props.cacheOptions) {
this.optionsCache = {};
}
/**
* loadArguments
* Optional property used in the remote request.
* If these change externally, then the options should be reloaded.
* This is handy for things like related selects.
*/
if (nextProps.loadArguments !== this.props.loadArguments) {
this.reload();
}
if (nextProps.defaultOptions !== this.props.defaultOptions) {
this.setState({
defaultOptions: Array.isArray(nextProps.defaultOptions)
? nextProps.defaultOptions
: undefined
});
}
}
}
And then, in my component:
const {loadArguments, myLoadFunc, ...attributes} = this.props;
return (
<AsyncSelect
{...attributes}
className={classes}
defaultOptions
loadArguments={loadArguments}
loadOptions={(inputValue) => myLoadFunc(inputValue, loadArguments)}
value={selected}
onChange={this.onChange}
/>
);
In github async example, input parameter getUsers(input) is the search text.
You can store your first react-select value in the component state, than loadOptions promise would fetch endpoint using this state value firstSelectValue
getUsers() {
return fetch(`https://api.github.com/search/users?q=${this.state.firstSelectValue}`)
.then((response) => response.json())
.then((json) => {
return { options: json.items };
});
}
A question about best practice (or even a go-to practice)
I have a list (ex. To-do list). My actual approach is:
On my parent component, I populate my 'store.todos' array. Using a
getter, I get all the To-do's and iterate on a list using a v-for
loop.
Every item is a Component, and I send the to-do item as a prop.
Inside this component, I have logic to update the "done" flag. And this element display a checkbox based on the "state" of the flag. When it does that, it do an action to the db and updates the store state.
Should I instead:
Have each list-item to have a getter, and only send the ID down the child-component?
Everything works fine, but if I add a new item to the to-do list, this item is not updated when I mark it as completed. I wonder if this issue is because I use a prop and not a getter inside the child component
Code:
store:
const state = {
tasks: []
}
const mutations = {
CLEAR_TASKS (state) {
state.tasks = [];
},
SET_TASKS (state, tasks) {
state.tasks = tasks;
},
ADD_TASK (state, payload) {
// if the payload has an index, it replaces that object, if not, pushes a new task to the array
if(payload.index){
state.currentSpaceTasks[payload.index] = payload.task;
// (1) Without this two lines, the item doesn't update
state.tasks.push('');
state.tasks.pop();
}
else{
state.tasks.push(payload.task);
}
},
SET_TASK_COMPLETION (state, task){
let index = state.tasks.findIndex(obj => obj.id == task.id);
state.tasks[index].completed_at = task.completed_at;
}
}
const getters = {
(...)
getTasks: (state) => (parentId) => {
if (parentId) {
return state.tasks.filter(task => task.parent_id == parentId );
} else {
return state.tasks.filter(task => !task.parent_id );
}
}
(...)
}
const actions = {
(...)
/*
* Add a new Task
* 1st commit add a Temp Task, second updates the first one with real information (Optimistic UI - or a wannabe version of it)
*/
addTask({ commit, state }, task ) {
commit('ADD_TASK',{
task
});
let iNewTask = state.currentSpaceTasks.length - 1;
axios.post('/spaces/'+state.route.params.spaceId+'/tasks',task).then(
response => {
let newTask = response.data;
commit('ADD_TASK',{
task: newTask,
index: iNewTask
});
},
error => {
alert(error.response.data);
});
},
markTaskCompleted({ commit, dispatch, state }, task ){
console.log(task.completed_at);
commit('SET_TASK_COMPLETION', task);
dispatch('updateTask', { id: task.id, field: 'completed', value: task.completed_at } ).then(
response => {
commit('SET_TASK_COMPLETION', response.data);
},
error => {
task.completed_at = !task.completed_at;
commit('SET_TASK_COMPLETION', task);
});
},
updateTask({ commit, state }, data ) {
return new Promise((resolve, reject) => {
axios.patch('/spaces/'+state.route.params.spaceId+'/tasks/'+ data.id, data).then(
response => {
resolve(response.data);
},
error => {
reject(error);
});
})
}
}
And basically this is my Parent and Child Components:
Task List component (it loads the tasks from the Getters)
(...)
<task :task = 'item' v-for = "(item, index) in tasks(parentId)" :key = 'item.id"></task>
(...)
The task component display a "checkbox"(using Fontawesome). And changes between checked/unchecked depending on the completed_at being set/true.
This procedure works fine:
Access Task list
Mark one existing item as done - checkbox is checked
This procedure fails
Add a new task (It fires the add task, which firstly adds a 'temporary' item, and after the return of the ajax, updates it with real information (id, etc..). While it doesn't have the id, the task displays a loading instead of the checkbox, and after it updates it shows the checkbox - this works!
Check the newly added task - it does send the request, it updates the item and DB. But checkbox is not updated :(
After digging between Vue.js docs I could fix it.
Vue.js and Vuex does not extend reactivity to properties that were not on the original object.
To add new items in an array for example, you have to do this:
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
More info here:
https://v2.vuejs.org/v2/guide/reactivity.html
and here: https://v2.vuejs.org/v2/guide/list.html#Caveats
At first it only solved part of the issue. I do not need the "hack" used after pushing an item into the array (push and pop an empty object to force the list to reload)
But having this in mind now, I checked the object returned by the server, and although on the getTasks, the list has all the fields, including the completed_at, after saving a new item, it was only returning the fields that were set (completed_at is null when created). That means that Vue.js was not tracking this property.
I added the property to be returned by the server side (Laravel, btw), and now everything works fine!
If anybody has a point about my code other than this, feel free to add :)
Thanks guys