【问题标题】:vue push property on an object对象上的 vue 推送属性
【发布时间】:2021-02-27 14:19:12
【问题描述】:

我有一个组件必须将属性推送到数组中,这是数组:

  [
    {
      date: "17/11/2020",
      dateTime: false,
      hour: "00",
      minute: "00",
    },
  ];

组件有一个按钮:

      <b-button
        class="p-0"
        variant="success"
        @click="addTime(array)"
      >
        + Add more times
      </b-button>

我希望每次点击按钮都添加一个像这样的“时间”属性:

       [
         {
           date: "17/11/2020",
           dateTime: false,
           hour: "00",
           minute: "00",
           time: [
             {
               defaultDateStart: "08:00",
               defaultDateEnd: "00:00"
             },
             {
               defaultDateStart: "08:00",
               defaultDateEnd: "00:00"
             },
               //etc....
           ],
         },
       ];

有可能吗?我尝试在 click 方法中使用 .push() ,但它不起作用...

【问题讨论】:

  • 显示你的代码,无论你到目前为止尝试过什么
  • 您的 time 属性格式错误......它应该是一个对象数组,而不是不可能的数组对象 - 除此之外,您还想 this.whateverTheArrayIsCalled[0].time.push(whatYouWantToPush)
  • @FahadSubzwari 我试过这个:`方法:{ addTime(array) { const hour = { defaulTimeStart: "08:00", defaultTimeEnd: "00:00", }; array.push(小时); }, }, ` 但它不起作用
  • @Bravo 我试过了,它给了我这个错误处理程序:“TypeError:无法读取未定义的属性'0'”]
  • 也许你打错了whateverTheArrayIsCalled?您还没有显示该数据在哪里(即它是组件数据的属性吗?它是全局的吗?其他的?)

标签: javascript arrays vue.js object


【解决方案1】:

你应该把你的对象变成这样

  let records = [
   {
    date: "17/11/2020",
    dateTime: false,
    hour: "00",
    minute: "00",
    time : []
   },
 ];

在你的函数addTime 你可以这样做

addTime(timeObject){
   // timeObject = {defaultDateStart: "08:00",defaultDateEnd: "00:00"} 
   records[0].time.push(timeObject)
}

【讨论】:

  • 好的,我写了这个并且它有效:`方法:{addTime(array){array.time = []; const hour = { defaultTimeStart: "08:00", defaultTimeEnd: "00:00", }; array.time.push(小时); }, },` 但仅在第一次点击时,在随后的点击中它不会添加其他“时间”对象
  • 因为你做错了。在每次点击addTime 时,您都会将arra.time 的值抗锯齿到[],那么您如何实现这一点?这就是为什么我告诉你你应该已经在你的每个对象中有time : [],然后在你的addTime函数中你应该这样做const hour = {defaulTimeStart: "08:300", defaultTimeEnd: "00:00:00"}; array.time.push(hour)
  • 问题是我没有创建初始数组,但是我从我安装的库中自动获取它,准备好了....你认为可以从图书馆?
  • 这样您就可以修改该初始数组并在您的进一步代码中使用该修改后的数组
猜你喜欢
  • 2023-04-09
  • 1970-01-01
  • 2018-07-06
  • 1970-01-01
  • 1970-01-01
  • 2017-02-27
  • 1970-01-01
  • 2021-08-13
  • 1970-01-01
相关资源
最近更新 更多