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

How you final object looks like? {id: 1212, timeIntensity: [{time: , intensity, ..}]}, share the exact final object, how the result should look like — chans
– chans, Commented Oct 24, 2019 at 18:12
If you are clear with your requirements, update this question with step by steps, how it should behave, your question is incomplete..you can also setup a separate chat discussion to discuss more on this.. — chans
– chans, Commented Oct 24, 2019 at 18:23

ecnopdev · Accepted Answer · 2019-10-25 03:17:13Z

So in your requirement, the flow will be:

Select from a list of IDs by clicking the chip. (initially without time).
Create a subset of selected items.
For each item, time can be specified.
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)

Collectives™ on Stack Overflow

return array of arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related