set vue data: object value

Question

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.

team is an array, why are you treating it like an object? Should it be an array? — Lawrence Cherone
– Lawrence Cherone, Commented Nov 4, 2018 at 16:11
Hi, Thanks for the answer but still nothing. There is no error simple just nothing happens . — Norbertho
– Norbertho, Commented Nov 4, 2018 at 16:14
i treat them as objects because they dynamically added fields so maybe there will be inside the team 1 img , name and 2nd img and name or maybe 3rd img, name. — Norbertho
– Norbertho, Commented Nov 4, 2018 at 16:19
You need to fix the @change binding. It is $event, not event. Use @change="onfilechangev($event, index)" and it should work. — TommyF
– TommyF, Commented Nov 5, 2018 at 7:02

TommyF · Accepted Answer · 2018-11-04 17:24:58Z

2

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.

answered Nov 4, 2018 at 17:24

TommyF

7,1708 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Norbertho Over a year ago

Thanks, I have edited my original question and included a codesandbox to it.

Collectives™ on Stack Overflow

set vue data: object value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related