Javascript 在带参数的函数内部动态使用Vue$refs

我正在尝试使用Vue访问DOM元素，使用

$refs

功能，但无法使其正常工作

vm.$children.forEach( child => {
    var tag = child.$vnode.data.ref;
    console.log(vm.$refs[tag]);
    vm.$refs[tag].loadData();  
});
// loadData() is a method to implement when mounted or when you want to reload data

我的元素如下所示。平板是动态生成的，因此它不总是相同的编号：

<textarea :ref="plateId + '-notes'">

vm.$children.forEach( child => {
    var tag = child.$vnode.data.ref;
    console.log(vm.$refs[tag]);
    vm.$refs[tag].loadData();  
});
// loadData() is a method to implement when mounted or when you want to reload data

每当我运行此代码并激活此函数时，它都会在我的控制台中读取

undefined

。我也试过这个，它也不起作用，读起来是未定义的：

/* This does not work */
addNotes: function(plateId) {
    var plateIdNotes = plateId + '-notes';
    console.log(this.$refs.plateIdNotes);
}

vm.$children.forEach( child => {
    var tag = child.$vnode.data.ref;
    console.log(vm.$refs[tag]);
    vm.$refs[tag].loadData();  
});
// loadData() is a method to implement when mounted or when you want to reload data

将

var

替换为

const

（我正在使用ES6并传输代码）也不起作用：

/* This does not work */
addNotes: function(plateId) {
    const plateIdNotes = plateId + '-notes';
    console.log(this.$refs.plateIdNotes);
}

vm.$children.forEach( child => {
    var tag = child.$vnode.data.ref;
    console.log(vm.$refs[tag]);
    vm.$refs[tag].loadData();  
});
// loadData() is a method to implement when mounted or when you want to reload data

我知道

ref

正确绑定到元素，因为当我在下面执行此操作时，我可以在控制台中看到我的所有其他ref，以及平板注释ref：

/* This works */
addNotes: function(plateId) {
    console.log(this.$refs);
}

vm.$children.forEach( child => {
    var tag = child.$vnode.data.ref;
    console.log(vm.$refs[tag]);
    vm.$refs[tag].loadData();  
});
// loadData() is a method to implement when mounted or when you want to reload data

---

如何使用函数中的参数访问

平板

ref？

您可以使用

[]

符号：

  methods: {
    foo (id) {
        alert(this.$refs[id + '-test'].innerText)
    }
  }

vm.$children.forEach( child => {
    var tag = child.$vnode.data.ref;
    console.log(vm.$refs[tag]);
    vm.$refs[tag].loadData();  
});
// loadData() is a method to implement when mounted or when you want to reload data

---

一个完整的工作示例：

此外，您还可以通过访问

vm.$children.forEach( child => {
    var tag = child.$vnode.data.ref;
    console.log(vm.$refs[tag]);
    vm.$refs[tag].loadData();  
});
// loadData() is a method to implement when mounted or when you want to reload data

////////////////////////////////////

vm.$children.forEach( child => {
    var tag = child.$vnode.data.ref;
    console.log(vm.$refs[tag]);
    vm.$refs[tag].loadData();  
});
// loadData() is a method to implement when mounted or when you want to reload data

<script>
    export default {

      data() {
        return {
            notifications: []
        }
    },

    mounted() {
        this.loadData();
    },

    methods: {

        loadData: function() {
            axios.get('/request-json/notifications').then(res => {
                this.notifications = res.data;
            });
        },
.....

导出默认值{
数据（）{
返回{
通知：[]
}
},
安装的（）{
这是loadData（）；
},
方法：{
loadData:function（）{
get（'/request json/notifications'）。然后（res=>{
this.notifications=res.data；
});
},
.....

除此之外，如果您在使用

v-for

和动态

refs

制作的一组组件中使用此选项，则需要使用

this.$refs[id+'-test'][0]。innerText

访问该组件中的任何内容