oliverbusk
3 months ago
44
1
Vue

Vue - Preloading JSON string from database

Posted 3 months ago by oliverbusk

I am trying to do, so my users can dynamically create table columns on top of an image.

I have below function, which works fine (I have minified the code a bit):

 data() {
     return {
           columns: [],
           xAxis: 0,
     }
},
addColumn: function () {

   this.columns.push({
           id: this.nextColumnId++,
           position: (this.xAxis * 100).toFixed(2),
           xAxis: this.xAxis
    });
},

I can successfully create new columns dynamically:

<a v-on:click="addColumn">Add Column</a>

This will just push a new "column" to the columns array. This will look like:

columns:Array[2]
   0:Object
      position:"30"
      xAxis:72
   1:Object
       position:"60"
       xAxis:578

Now my problem is when I am trying to load an image, that already has columns defined. This is stored in my database like so:

{"1": {"position": "30"}, "2": {"position": "60"}} 

(Above is two columns, at 30% on the page and 60% on the page)

I pass above, to below Vue prop (an object):

current:Object
   columns:"{"1": {"position": "30"}, "2": {"position": "60"}}"
   name:"test"
   created_at:"2019-05-13 17:23:32"

In my child file (DocumentViewer.vue), I try to add these columns:

columns:Object
   1:Object
      position:"30"

   2:Object
      position:"60"

As you can see, the structure in the pre-loaded columns is different from the one created dynamically, thus resulting in my code to break.

My question is, how can I preload the columns as an array, and add each column object, with the correct elements:

position: xx,
xAxis: xx,

Please sign in or create an account to participate in this conversation.