Как в template указать название переменной из data в цикле?

Question

[Артем Прохоров]

<div v-for="(elem, key) in data" :="key">{{ elem }}</div

export default {
  data() {
    return {
      a: 1,
      b: "some",
      c: [1, 2, 3],
      data: ['a', 'b', 'c']
    }
  }
}

data в цикле - это массив такого вида ['a', 'b', 'c'].
И хочу чтобы выводилось значение моей переменной, а не строка a b или c.

Comments

[WapSter]

Я хз как ты обратился к data в темплейте, но и если это правда в чем я очень сомневаюсь, то точно так же как обращаемся к свойствам объекта при помощи скобочной записи.

data в цикле - это массив

Блин где вы такие беретесь(( Как по твоему цикл смог изменить тип данных? for .. in итерирует по свойсвам объекта и то в том случае если они итерируемые. data вообще функция которая возвращает объект

[Артем Прохоров]

WapSter, Перечитайте вопрос, так лучше стало?

Answer 1

[WapSter]

<div
      v-for="(elem, key) in data"
      :key="key"
    >
      {{ $data[elem] }}
    </div>

Answer 2

[Дмитрий Гололобов]

На вскидку вижу два варианта:

1. свои переменные a, b, c заверните в объект:

export default {
  data() {
    return {
      myVars: {
           a: 1,
           b: "some",
           c: [1, 2, 3],
      },
      data: ['a', 'b', 'c'],
    }
  }
}

<div v-for="(elem, key) in data" :="key">{{ myVars[elem] }}</div>

2. Сделайте метод для получения значений переменных по их названию:

export default {
  data() {
    return {
      a: 1,
      b: "some",
      c: [1, 2, 3],
      data: ['a', 'b', 'c'],
    }
  },
  methods: {
     getDataValue(param) {
            return this[param] || null;
      },
   },
}

<div v-for="(elem, key) in data" :="key">{{ getDataValue(elem) }}</div>