JSON parse returns empty string?

Question

I am not sure if this is an issue about VueJS or JS itself.

I have string in my DB (converted JS Object with JSON.stringify() ) which looks like this:

{"type":5,"values":{"7":"/data/images/structured-content/64-7-scico.jpg","8":"<b>wefwe</b>","9":"Nějaký text","10":"/data/images/structured-content/64-10-scico.jpg"}}

What I wanted to do is select it from database (via Axios), convert it back to JS object and set it to VueJS data:

.then(response => {

            if (response.data.response === "ok" && response.status == 200) {

                // get data
                let data = response.data.data.data[0];

                // pass name to state
                this.objectName = data.name;

                // get json in string format
                let result = data.content;

                // first log
                console.log(result);

                // convert string to json
                let content = JSON.parse( result );

                // second log
                console.log( content.values );

                // update states
                this.IDType = content.type;
                this.values = content.values;


            }

        })

Axios , data.name and content.type works fine, however the second log ( content.values ) seems to be returning observer with empty strings which I can't pass to Vue data and work with it, as you can see on the screen below, values in this object are just empty no matter what I do. What is exactly wrong in here? Thank you!

from debugger:

Answer 1

To be reactive Vue needs to know what the keys of an object are before you assign them. So if they are known, pre assign them:

data : () => ({
  values : {
     7 : "",
     8 : "",
     9 : "",
     10 : ""
  }
}),

Then use object assign to set them:

Object.assign(this.values, content.values)

If the keys are unknown / dynamic values you can set them to be reactive using the $set method:

Object.keys(content.values).forEach(
  function(key){
     this.$set(this.value, key, content.values[key])
  }
)