I have Vue.ja app and I try to change a value inside an object. Basically when #change="onfilechangev" occurred I would like to update name: ' ' value
Is there any way to do this or as it is an object I wont be able to update it?
app.js
var vm = new Vue({
el: '#regapp',
data: {
team:[
{
img: '',
name: '',
}
],
},
methods: {
onfilechangev(event) {
let uploads = event.target.files[0]
let pic = uploads.name;
Vue.set(vm.team.name, 'pic', )
},
Thanks for the answers. I have tried to do it but no luck. I have modified the codesandbox below to my situation. https://codesandbox.io/s/736nqq6070
little explain: I have dynamically added fields with optional profile image upload. So when I have added for example 3 team members then I would like to save them to the database with Laravel on the backend. if i select an image i push that file to the selectedFile array (it works), But as the profile pic only optional and not required somehow i need to know if teamemeber has image or not. That is why I try to set a hidden input field filename. so on the back end i can check selectedField array contains the filename if yes then i can save the image to the member.
Since you are only modifying an existing property of an array member, you don't even need to use Vue.set.
A simple this.team[0].name = pic will suffice, check this sandbox:
https://codesandbox.io/s/l2ky6rkx0l
The JS limitations regarding reactivity only apply to re-assigning an array element or adding a new root property, neither of which is the case for you.
Related
I'm trying to perform a basic Laravel 5 post request which simply do the following:
Save some data into a database
Stores a file (image) into public storage under a name which is a possible combo of 20 random numbers following '.jpg'
Save a url (which is used to locate the image in an img tag. I'm aware this isn't the best approach so feel free to post)
However, when performing an ordinary post request with no special headers from angular 6 to laravel 5, for some reason the File keeps converting into an empty array. (Before and after shots are below)
Before:
0: Object { id: 0, body: null, file: File }
After:
0: Object { id: 0, body: null, file: [] }
The File is full and is used to create a preview on a canvas before submitting so It works. The console is logging this data the line before posting and returning the $req Request before performing any php code in Laravel.
So the only place anything could get lost in translation is the in between. Code is as follows:
Angular 6:
postToLaravel(object) {
console.log(object.message);
this.http.post(this.url + '/add/message', object).subscribe(res => {
console.log(res);
});
}
Laravel 5:
function addMessage(Request $req) {
return $req->messages;
The empty array keeps pushing nothing to storage under a name its registered as a jpg file but no image is shown.
On the component that images are uploaded we have the following block take place after a (change)="" event:
onFileSelected(e: any) {
this.sectedFile = e.target.files[0];
this.isImage = true;
this.messageService.addImage(this.id, this.sectedFile);
this.preview();
}
The service function just finds the right object and adds a file:
addImage(id, file) {
var index = this.data.findIndex(x => x['id'] == id);
this.data[index]['body'] = null;
this.data[index]['file'] = file;
}
And when the submit button is pressed it just takes all the variables in the service and compacts them into an object. this object contains messages which is an array of further objects (the objects are as shown at the top) (If that made sense)
pushMessageToServer() {
this.messageService.postToLaravel({
title: this.title,
location: this.location,
gender: this.gender,
age: this.age,
deadline: this.deadline,
messages: this.data
});
}
Is there something I'm missing here?
Let me know should You need any extra info.
Turns out images in FormData are passed through and displayed as empty objects in the console. I just needed to know how to grab them. Thanks for your help everyone
I am using Angular 1 and the angular-file-upload plugin.
I want to create an array populated in the following way:
result = [{
name: "whatever string",
uploadedFilePath: "/whatever/path/image.png"
}, {
name: "other string",
uploadedFilePath: "/whatever/path/otherImage.png"
}]
In the view I have an ng-repeat with a name input and a file-input field and a button that creates another card with the same fields in the ng-repeat.
I can add the names to the array in the corresponding objects without much issue.
If there is a single upload input and not in the ng-repeat (either file input or multiple) I can easily get the path by taking it through the event:
vm.uploader.onCompleteItem = function(fileItem, response, status, headers) {
vm.uploadedFilePaths.push(response.filePath);
};
and then getting the paths from vm.uploadedFilePaths.
I don't know any good practices for showing the file input in the view so I'm using:
<input type="file" ng-file-model="files" multiple />
<p ng-repeat="file in files">
{{file.name}}
</p>
I don't know how to get the paths corresponding to each of the uploaded files and adding them to the corresponding object in the array.
I'm somewhat confident I should be using the event vm.uploader.uploadAll(); at the end to put them in the corresponding place ? But how do I find out the corresponding place for each, I'm not sure how I can utilize $index here.
I'm very new to using angular-file-upload so I'd appreciate it very much if you could explain it like it's for a newbie.
Declare a object as
vm.fileDetails = {
name:"",
path:""
}
and then on the completion of upload
vm.uploader.onCompleteItem = function(fileItem, response, status, headers) {
vm.fileDetails.name = response.fileName;
vm.fileDetails.path = response.filePath;
vm.uploadedFilePaths.push(vm.fileDetails);
};
Now you can use this array in your view to get details.
So I saw this app for rally on Github:
https://github.com/RallyApps/DefectSummaryMatrix
And I am trying to make the same thing, except for test cases and user stories, instead of defects. How would I go about doing this? I am pretty new into the rally SDK and kind of lost to be honest, so anything you guys can say would help.
I've been looking at the App.html for this, and I think this part is the part I need to pay attention to cause this is where it gets the information about the defects:
var defectQuery = function() {
var selected = releaseDropdown.getSelectedName();
var releaseQuery = '(Release.Name = "' + selected + '")';
var queryObject = [];
queryObject[0] = { key: 'defectStates', type: 'Defect', attribute: 'State' };
queryObject[1] = { key: 'defectPriorities', type: 'Defect', attribute: 'Priority' };
queryObject[2] = {
key: 'defects',
type: 'Defect',
query: releaseQuery,
fetch: 'FormattedID,Name,State,Priority,ScheduleState,ObjectID,Description,owner,DisplayName,LoginName'
};
rallyDataSource.findAll(queryObject, populateTable);
};
How do I modify this to get information about user stories? I think the type field would be called userStory or something like that, but then what would the key and attributes be? I can't find any documentation on this.
See Rally object model in Web Services API documentation.
User stories are called "HierarchicalRequirement" in the WS API. Click on HierarchicalRequirement object in the object model to go over the attributes.
I suggest that you do not use the DefectSummaryMatrix as a starting point. It is a legacy app that is using legacy AppSDK1. Use AppSDK2 instead. There is an example of multi-type object grid here.
I've seen other posts in this site regarding the same issue and I've tried the solutions given. I've also visited the links that may offer a solution but I'm still stuck with the same error.
I'm using DOJO and something as simple as this won't even work
myStore.newItem({id: 'test', otherfield: 'otherinfohere'});
myStore.save();
Supposedly the "newItem() was not passed an identity for the new item" error appears when you haven't provided an identifier for the new item, which i have.
The whole purpose of this (Just in case anyone can provide a good idea or has done something similar before) is that i want to create a data grid that shows info from a particular store. The problem is, that in that store all the items may not have the same structure. For instance:
I may have a store that looks like this
{identifier: 'id',
label: 'name',
items: [
{ id:'1', name:'Ecuador', capital:'Quito' },
{ id:'2', name:'Egypt', capital:'Cairo' },
{ id:'3', name:'El Salvador', capital:'San Salvador' , additionalField: 'otherinfohere'},
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo', additionalField: 'otherinfohere'},
]}
This is possible because I'm the one constructing the store in a Spring Controller (I'm also using the Spring Framework) from information I have locally stored in a Berkeley DB. So what i need is a data grid with a dynamic layout because I don't want blank spaces to show in the view in the rows with lesser amount of fields, and i need to show all the info in the store at the same time, but i don't know how to do this.
I thought of doing it by creating a simple layout of only 1 field. In it I would load data from a store i create dynamically at runtime. The data in the store would be composed of HTML combined with the values coming from the original store so I could obtain something like this, which is inside an attribute of a JavaScript Object and let the browser parse it for me:
<div><span>id: originalID </span>....</div>
This of course is a simple example, the html layout i'm looking for is far more complicated, but i think that passing it as a string to an object might do the trick.
The problem is that i don't even know if that idea will work because i get that error whenever i try to add values to my secondary store.
rdb.modules.monitor.historicStore.fetch({onComplete: function(items, request){
for (var i = 0; i < items.length; i++){
var item = items[i];
var obj = new Object();
obj.id = rdb.modules.monitor.historicStore.getValue(item, "id");;
var html = "<div><span>";
html += rdb.modules.monitor.historicStore.getValue(item, "sql");
html += "</span></div>";
obj.html = html;
myStore.store.newItem(obj);
}
}});
In this context "historicStore" refers to the JSON store that has the values that i need to convert and add to "myStore" after i added some HTML.
I hope you got the main idea of what I'm trying to do. If anyone can help me we either of these problems i would really appreciate it. Thanks in advance
For the issue regarding store:-
"id" is mandatory for a store, if it is going to be used for a grid(datagrid, EnhancedGrid, etc. whatever). The items are handled only on basis of "id" attribute by the grid data structures.
Usually, id can be a loop variable/ auto incrementation, to avoid any cases like you have said. Before adding the store to the grid, ensure that all items have the id attribute. You can write a function which will loop through each item and check for this, else add an auto-incrementing value for the id attribute of that item.
I have 2 stores, one for events and one for data captured for that event. I am trying to get the id from the events store and use it in the data store. I have the following field in my data model:
{ name: 'eventId', type: 'int' },
My controller fetches the form data, validates it and after this, my code fails. I am trying the following to get the id from the first store and then set it in the second store
var idStore = Ext.getStore('Details');
var id = idStore.findRecord('id');
currentData.set('eventId', newValues.id);
My console returns null for var id, which leads me to believe that my code is wrong, can someone help explain to me how I fetch the id and use it?
Thanks
I figured it out, the docs Docs say to specify the value after the field. All I had to do was to add '1' after the 'id' field.
This does raise some questions though, I have to ensure that my id's always start with '1', does anyone know of a better way?