javascript - 返回数组的数组

Question

我有一个包含 ID 的数组，当我单击它时，ID 会被推送到数组中。我可以为所选 ID(时间)添加一个值。每行都有自己的字段“时间”

最后我需要创建一个包含所有这些值的数组，例如:[[id,时间],[id,时间],[id,时间]]

我做了一个 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')
    }
  }
})

感谢您的帮助

Answer 1

因此，根据您的要求，流程将是:

1. 通过单击芯片从 ID 列表中进行选择。 (最初没有时间)。
2. 创建所选项目的子集。
3. 对于每个项目，都可以指定时间。
4. 点击“提交”后，创建并显示最终合并的数据。

这是片段

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);
    }
  }
})

这是一个工作 code-pen 来说明上述步骤(我修改了 UI 的某些部分)