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：无法读取属性＆＃39;星期日＆＃39;未定义的

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

编辑：它似乎与hours无法在bus上提供的console.log(bus)属性相关。如果我sunday: ''它没有显示。但我需要将此数据添加到此业务中。有没有办法让它忽略它还没有的数据？我不明白的是，如果它不是嵌套的...又名hours: { sunday: ''}而不是task signJar(type: SignJar, dependsOn: reobfJar) { onlyIf { project.hasProperty('mod_keystore') } keyStore = project.keyStore alias = project.keyStoreAlias storePass = project.keyStorePass keyPass = project.keyStoreKeyPass inputFile = jar.archivePath outputFile = jar.archivePath }它可以正常工作。

编辑：这是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

是undefined。但是在你的模板中，你继续参考

newComment.subcomment.name

因此，您基本上试图获得name的{{1}}属性。 undefined没有name属性。这就是你得到错误的原因。

您可以保护自己免受此错误影响的一种方法是在使用undefined呈现元素之前检查以确保subcomment属性存在（如果这是错误的pug语法，请原谅我 - 我不熟悉它）

v-if

这样可以防止错误。

或者，在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，那么任何事情都不会崩溃，它只是将输入元素的值设置为undefined，当你更改它时，v-model="newComment.name"将获得更新的值。

换句话说，当您尝试引用newComment.name 时，您试图引用不存在的内容的名称属性，而当您尝试引用newComment.subcomment.name时，对象存在，并且没有newComment.name属性。

编辑Vue数据时出现问题

1 个答案: