Javascript Vuejs动态添加了未定义的ref

我正在尝试创建一个小数据编辑器。单击处理程序将在父类别中添加子项，如下所示：

methods: {
  addBlank: function(parentKey){
  var obj = {}
  obj.id = Math.floor((Math.random() * 99999) + 1)
  obj.name = "New Item"
  obj.data1 = 9
  obj.data2 = 9
  obj.data3 = 9

  this.categories[0].children.push(obj)

  console.log("New ref is:",obj.id)
  console.log(this.$refs)  // new $ref is available
  console.log("I can't select it",this.$refs[obj.id]) //returns undefined
  console.log("But I can select others",this.$refs['4214234']) //this is ok
  }
}

代码笔示例：

---

为什么

this.$refs[obj.id]

在存在时返回罚款不足

在生成DOM元素之前，ref实际上不可用。在这种情况下，您必须等到它存在后才能使用它

通常，在Vue中，您可以使用

  addBlank: function(parentKey, event){
      var obj = {}
      obj.id = Math.floor((Math.random() * 99999) + 1) //(actually a uuid generator is used here)
      obj.name = "New Item"
      obj.data1 = 9
      obj.data2 = 9
      obj.data3 = 9

      this.categories[0].children.push(obj)

      this.$nextTick(() => {
          console.log("New ref is:",obj.id)
          console.log(this.$refs)  
          console.log("I can't select it",this.$refs[obj.id])
          console.log("But I can select others",this.$refs['4214234'])
      })
  }

这是你的护照

---

注意：造成混淆的一个常见原因是，当您在

addBlank

方法中记录

this.$refs

时，当您在控制台中检查它时，它似乎就在那里。但事实并非如此。您正在记录对refs对象的引用，当您在控制台中查看该对象时，该对象具有ref，但当您从函数中记录它时，它还没有ref.Chrome（可能还有其他浏览器）将显示您记录的引用的当前状态。

在生成DOM元素之前，引用实际上不可用。在这种情况下，您必须等到它存在后才能使用它

通常，在Vue中，您可以使用

  addBlank: function(parentKey, event){
      var obj = {}
      obj.id = Math.floor((Math.random() * 99999) + 1) //(actually a uuid generator is used here)
      obj.name = "New Item"
      obj.data1 = 9
      obj.data2 = 9
      obj.data3 = 9

      this.categories[0].children.push(obj)

      this.$nextTick(() => {
          console.log("New ref is:",obj.id)
          console.log(this.$refs)  
          console.log("I can't select it",this.$refs[obj.id])
          console.log("But I can select others",this.$refs['4214234'])
      })
  }

这是你的护照

---

注意：造成混淆的一个常见原因是，当您在

addBlank

方法中记录

this.$refs

时，当您在控制台中检查它时，它似乎就在那里。但事实并非如此。您正在记录对refs对象的引用，当您在控制台中查看该对象时，该对象具有ref，但当您从函数中记录它时，它还没有ref。Chrome（可能还有其他浏览器）将显示您记录的引用的当前状态。

为什么使用

Math.floor（（Math.random（）*99999）+1）

当使用

Math.ceil（（Math.random（）*99999）

可以实现同样的功能时？但更重要的是，您如何知道

这一点。$refs[obj.id]

已定义？它显然没有定义。当您检查它时，$refs会显示什么？您需要等待，直到使用

nextTick

实际创建了ref。这是您的固定笔。如果可以使用

Math.floor（（Math.random（）*99999）+1）实现同样的操作，为什么要使用
Math.ceil（（Math.random（）*99999）呢
？但更多的问题是，你怎么知道
这个。$refs[obj.id]
是定义的？它显然不是。当你检查它时，
这个。$refs
显示了什么？你需要等待，直到使用
下一步
实际创建ref。这是你的笔。