Question

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

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
  }
}

Codepen示例：https://codepen.io/Kay_Wolfe/pen/xJEVRW

this.$refs[obj.id]为何返回未定义的位置？

Answer 1

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

通常在Vue中，您使用nextTick来做到这一点。

  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'])
      })
  }

这是您的pen updated。

请注意：造成混淆的一个常见原因是，当您在this.$refs方法中登录addBlank时，它会出现，就像在ref中检查引用时一样。安慰。但是，实际上并非如此。您正在记录对refs对象的引用，当您在控制台中查看它时，该具有该ref，但是当您从函数中记录它时，该还没有裁判。 Chrome（可能还有其他浏览器）将显示您记录的参考的当前状态。

Vue.js动态添加引用未定义

1 个答案: