0

I a getting data from the laravel using this response :

$unserialize = unserialize($import->field_names);
return response()->json( $unserialize, 200 ) ;

Now on the Vue JS I can console the response using this :

console.log(response); 

and It's showing the data in array (Check the red arrow mark):

enter image description here

Now, I have a options empty array property like this:

options : []

I want to push object data to this array with a key value and text. This key's value will be that response data single item. So, To do this, I am using this:

response.data.forEach((item, index) => {
    this.options.push({
        value: item,
        text: index
    });
});

but If I console

console.log(this.options);

I can not see the array of object to this options propery. I can see this:

enter image description here

can you tell me why? I want this options should store the item like this:

options: [
    { value: null, text: 'Please select some item' },
    { value: 'a', text: 'This is First option' },
    { value: 'b', text: 'Default Selected Option' },
    { value: 'c', text: 'This is another option' },
    { value: 'd', text: 'This one is disabled', disabled: true },
] 

Update:

Console.log(response);

enter image description here

12
  • Can you post your more Vue code ? and as from your question I understood that options are filling with empty object right ? Commented Jul 13, 2022 at 17:29
  • @rohin-arka check my full vue code: codeshare.io/Pdn8ge. By default options will be empty array object but will be fill up like the example I posted. Commented Jul 13, 2022 at 18:52
  • Can you expand(eg click on the 0 index) the options and post. The browser console do not expand by default I wanted to know the options is array of empty object. Commented Jul 14, 2022 at 2:27
  • @rohin-arka `console.log(this.options) is prnt.sc/RfURA0Ko6PIs Commented Jul 14, 2022 at 3:00
  • 1
    observer is a special property added by Vue and it is part of Vue reactivity system. Is that causing problem ?. If yes you can do console.log(JSON.parse(JSON.stringify(this.options))). You can check here for more details github.com/vuejs/Discussion/issues/292 and vuejs.org/guide/extras/reactivity-in-depth.html Commented Jul 14, 2022 at 3:50

1 Answer 1

0

I think that the problem could be in this keyword

you can modify your code in this way

this.options = [...this.options,
                ...response.data.map((item, index) => 
                     ({
                        value: item,
                        text: index
                      })
                )]

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

1 Comment

No. Its showing same output

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.