return array of arrays

Question

I have a array who contain ID's when I click on it, id's are pushed to a array. I can add a value for the selected id's (time). each line have his own field 'time'

at the end I need to create a array with all all these value like : [[id,time],[id,time],[id,time]]

I made a Js fiddle

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
              <v-card>
                <div v-for= "(obj, index) in object">
                    <v-chip
                            @click="add(obj)"
                            >
                        {{obj.id}}
                    </v-chip>
                </div>
            </v-card>
            <v-divider></v-divider>
            <v-card>
                <div v-for= "(obj, index) in arrayOfSelection">
                    <v-chip >
                        {{obj.id}}
                    </v-chip>
                    <v-text-field type="number"></v-text-field>
                </div>
            </v-card>
            <v-btn>Submit</v-btn>
            {{finalArray}}

  </v-app>
</div>

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {

    // #1 method to add line
    // # method to console an object like { time:intensity, time:intensity, time:intensity,... } so for example { 10:50, 20:80, 50:40, ....}

  },
  data() {
    return {
        object:[
        { id: 123456},
        { id: 741258},
        { id: 789654},
      ],
      array: [],
      arrayOfSelection: [],
      finalArray:[]


    }
  },
  methods: {
    add(obj) {
      this.arrayOfSelection.push({
        id: obj.id,
      })
    },
    submit() {
        this.finalArray.push('something')
    }
  }
})

thanks for your help

Answer 1

So in your requirement, the flow will be:

1. Select from a list of IDs by clicking the chip. (initially without time).
2. Create a subset of selected items.
3. For each item, time can be specified.
4. Upon clicking submit, create and display the final merged data.

Here are the snippets

HTML

<div id="app">
    <v-app>
       <v-content>
        <v-container>
          <h3>Choose among these items:</h3>
        <v-card>
          <v-card-text pa-3>
            <v-layout row dense>
             <v-flex v-for= "(obj, index) in object" :key="index">
             <v-chip @click="add(obj)">
                {{obj.id}}
             </v-chip>

                </v-flex>
              </v-layout>

          </v-card-text>  
        </v-card>
            <v-divider></v-divider>
          <h3>Selected Items:</h3>
            <v-card>
         <v-card-text pa-3>
            <v-layout column>
                <v-flex v-for= "(obj, index) in arrayOfSelection" :key="index">
                <v-layout row>
                  <v-flex xs1>
                    <v-chip @click="add(obj)">
             {{obj.id}}
           </v-chip>
                  </v-flex>
                  <v-flex>
                    <v-text-field label="Time" v-model="obj.time" type="number" ></v-text-field>  
                  </v-flex>  
                </v-layout>                                     
                </v-flex>
              </v-layout>

          </v-card-text>
            </v-card>
            <v-btn @click="submit">Submit</v-btn>
          <template v-if="finalArray.length > 0">Final Array {{finalArray}}</template>
          <v-container>
       <v-content>  
  <v-app>
</div>

JS

var vm = new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      object:[
        { id: 123456, time: 0},
        { id: 741258, time: 0},
        { id: 789654, time: 0},
      ],
      array: [],
      arrayOfSelection: [],
      finalArray:[]
    }
  },
  methods: {
    add(obj) {
      this.arrayOfSelection.push({
        id: obj.id,
        time: obj.time
      })
    },
    submit() {
        this.finalArray.push(this.arrayOfSelection);
    }
  }
})

Here is a working code-pen to illustrate the steps above (I modified some parts of the UI)