Динамическое использование Vue $ refs внутри функции с параметром

Question

Я пытаюсь получить доступ к элементу DOM с помощью Vue, используя функциональные возможности $refs, но у меня возникают проблемы с его работой.

Мой элемент выглядит так ниже. PlateId генерируется динамически, поэтому это не всегда будет один и тот же номер:

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

Моя функция Vue выглядит так:

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

Каждый раз, когда я запускаю этот код и функция активируется, в моей консоли просто читается undefined. Я также пробовал это, что тоже не работает и читается как undefined:

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

Замена var на const (я использую ES6 и транспилирую код) тоже не работает:

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

Я знаю, что ref правильно привязан к элементу, потому что, когда я делаю это ниже, я могу видеть все мои другие ссылки в консоли, а также ссылку plateId-notes:

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

Как я могу получить доступ к ссылке plateId с помощью параметра в моей функции?

javascript function parameters vue.js ref

3

aCarella 13 Мар 2018 в 16:02

Answer 1

Вы можете использовать обозначение []:

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

Полный рабочий пример: https://jsfiddle.net/drufjsv3/2/

2

Hammerbot 13 Мар 2018 в 13:13

Answer 2

Кроме того, вы можете получить доступ ко всем отображаемым $ 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

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

<script>
    export default {

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

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

    methods: {

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

0

Pablo Araya 20 Дек 2018 в 06:05

Динамическое использование Vue $ refs внутри функции с параметром

2 ответа

Похожие вопросы

Новые вопросы

javascript