Vue 推入嵌套数组

Question

我有一个 vue 应用程序，我试图在其中保存一个数组，该数组由一个日期字段组成，并且内部有另一个包含时间的数组，时间以 startTime 和 untilTime 作为值。我想要实现的是，当我单击按钮时，应在单击按钮时添加连接到 time.startTime 和 untilTime 的字段。但我收到此错误：

    vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

found in

---> <DatePickerComponent> at src/components/DatePickerComponent.vue
       <VCard>
         <VThemeProvider>
           <VDialog>
             <VsRow>
               <VCard>
                 <NextMeetingCardComponent> at src/components/NextMeetingCardComponent.vue
                   <DashboardComponent> at src/views/DashboardComponent.vue
                     <VMain>
                       <VApp>
                         <App> at src/App.vue
                           <Root>

我对 vue 有点陌生，javascript 有人可以指出我的错误吗？

 <template>
      <div>
      <v-row>
        <v-col cols="12" sm="12">
          <v-menu v-for="item in dates" :key="item"
            ref="menu"
            v-model="menu"
            :close-on-content-click="false"
            :return-value.sync="dates"
            transition="scale-transition"
            offset-y
            min-width="auto"
          >
            <template v-slot:activator="{ on, attrs }" >
              <v-text-field
                v-model="item.date"
                label="Picker in menu"
                prepend-icon="mdi-calendar"
                readonly
                v-bind="attrs"
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker
              v-model="dates"
              no-title
              scrollable
            >
              <v-spacer/>
              <v-btn
                text
                color="primary"
                @click="menu = false"
              >
                Cancel
              </v-btn>
              <v-btn
                text
                color="primary"
                @click="$refs.menu.save(dates)"
              >
                OK
              </v-btn>
            </v-date-picker>
          </v-menu>
          <v-btn v-on:click="addTimeFields()">Add Time</v-btn>
        </v-col>
      </v-row>
        <v-row v-for="i in dates" :key="i">
          <v-col
            cols="6"
            sm="6"
          >
              <v-text-field
                v-model="i.time.startTime"
                label="Starttime"
                type="time"
              ></v-text-field>
          </v-col>
          <v-col
            cols="6"
            sm="6"
          >
            <v-text-field
              v-model="i.time.untilTime"
              label="Untiltime"
              type="time"
            ></v-text-field>
          </v-col>
        </v-row>
    
      </div>
    
    </template>
    <script>
   export default {
  name: "DatePickerComponent",
  data: () => ({
    dates: [{date: new Date().toISOString().substr(0,10), time: [{
        startTime: "",
        untilTime: ""
      }]}],
    timeInputFields:[],
    selectedDate: [],
    menu: false,
    modal: false,
    menu2: false,
  }),

  methods:{
      addTimeFields(){

        this.dates[0].time.push({
          startTime: "",
          untilTime: "",
        })


      }
  }



};
</script>

输出视图：

Vue output

Answer 1

我认为有几个问题。

时间不是一个数组，它是一个对象
数组中没有 2 个日期，因此可能需要基于 0 的索引。

#2 是错误的来源。

      addTimeFields(){

        this.dates[0].time.push({
          startTime: "",
          untilTime: "",
        })
      }

由于您的第一个条目已经设置了开始和结束时间，要更新您只需要：

  this.dates[0].time = {
    startTime: "",
    untilTime: "",
  }
or

  this.dates[0].time.startTime = "",
  this.dates[0].time.untilTime = "",

编辑一个

我为你的代码创建了一个代码笔，有很多错误，可能与设置有关，但这张截图显示了如果你将两个日期添加到数组中会发生什么。您会在顶部获得它们的列表，然后是时间列表。这让我觉得你可能只是想要一个？

请看这支笔，https://codepen.io/OblivionSY/pen/rNyOLpw?editors=1011它并不神奇，而且不能完全工作（日期选择器有错误）

一些一般注意事项：

确保你的 :key 值是原始的（字符串、整数等）并且是唯一的
尝试将功能分解成组件。如果您有多个日期，则使用一个组件来处理编辑单个日期和相应的时间。

如果要我再看一眼，请随时编辑笔。

Vue 推入嵌套数组

Vue push into nested array

javascript

web-applications

vue.js

编辑一个