javascript - 编辑 Vue 数据时出现问题

Question

如果我在 Vue JS 2 中有这样的数据:

data : {
  newBus: {
    name: '',
    hours: {
      sunday: '',
    }
  }
}

我在这里设置:

<input v-model="newBus.hours.sunday" type="text" placeholder="Sunday">

以这种方式添加业务是可行的，当我尝试更新它们时会出现问题。用户单击列表中的项目，然后保存的数据像这样填写表单:

<div v-for="bus in businesses" v-on:click="editBus(bus)" class="list-group-item bus-list-item">{{bus.name}}</div>

方法:

editBus: function (bus) { 
    /*Set post values to form*/
    this.newBus = bus
  },

但是我得到了错误:

vue.js:1453 TypeError: Cannot read property 'sunday' of undefined

单击要更新的项目时会立即发生这种情况。有什么想法吗？

编辑:这似乎与 hours 属性在 bus 上不可用有关。如果我 console.log(bus) 它不显示。但是我需要将此数据添加到此业务中。有没有办法让它忽略它还没有的数据？我不明白的是，如果它不是嵌套的...又名 sunday: '' 而不是 hours: { sunday: ''} 它工作正常。

编辑:这是 CodePen休闲。

Answer 1

这里的问题实际上不是 Vue 问题，而是 Javascript 问题。 您不能访问未定义的属性。

使用您笔下的示例数据结构。

newComment: {
    name: '',
    comment: '',
    votes:  0,
    time:  timeStamp(),
    subcomment: {
        name: ''
    }
}

在这种情况下，您已经使用定义的值设置了所有内容，因此所有内容都将得到解决。当您单击编辑按钮时出现问题，收到的对象如下所示:

{
    name: "some name",
    comment: "some comment",
    time: "4/5/2017",
    votes: 145,
    .key: "-Kh0PVK9_2p1oYmzWEjJ"
}

注意这里没有 subcomment 属性。这意味着这段代码

的结果

newComment.subcomment

未定义。但是在您的模板中，您继续引用

newComment.subcomment.name

因此，您实质上是在尝试获取 undefined 的 name 属性。 undefined 没有name 属性。这就是您收到错误的原因。

您可以避免此错误的一种方法是在使用 v-if 呈现元素之前检查以确保 subcomment 属性存在(请原谅我，如果这是错误的哈巴狗语法——我不太熟悉)

input#name(type="text")(placeholder="Name")(v-model="newComment.subcomment.name")(v-if="newComment.subcomment")

这将防止错误。

或者在您的 editComment 方法中，您可以检查 subcomment 是否存在，如果不存在，则添加它。

if (!comment.subcomment)
    comment.subcomment = {name: ''}
this.newComment = comment

最后，你会问，如果不是嵌套数据，为什么它可以工作。关键区别在于:如果 newComment 存在，则这样说

newComment: {}

并且您尝试获取 newComment.name，然后 name 的返回值为 undefined。如果你有一个类似 v-model="newComment.name" 的模板，什么都不会崩溃，它只是将输入元素的值设置为未定义，当你改变它时, newComment.name 会得到更新后的值。

换句话说，当您尝试引用 newComment.subcomment.name 您正在尝试引用不存在的名称属性，而当您尝试要引用 newComment.name，该对象存在，并且它没有 name 属性。