vuejs - как связать вычисляемый атрибут из строковой интерполяции

Question

У меня есть набор вычисленных данных, каждый из которых возвращает URL -

computed:{
facebookUrl(){return "facebook.com"},
twitterUrl(){return "twitter.com"}
}

в шаблоне У меня есть цикл v-for, и в каждом из элементов у меня есть 'имя'(name: "facebook", name: "twitter")

теперь я использую wand, чтобы привязать вычисленный URL для каждого из них следующим образом (я пробовал несколько способов, все заканчиваются одинаково) -

:href="`${item.name}Url`"

но вместо получения вычисленного значения я получаю только строки ...

и да, я знаю, что могу использовать метод с параметром для возврата значения ...

Answer 1

Вы можете сделать одно вычисление, которое возвращает словарь URL вместо нескольких вычисляемых.Затем вы можете найти URL каждого элемента.

new Vue({
  el: '#app',
  data: {
    items: [{
        name: 'facebook'
      },
      {
        name: 'twitter'
      }
    ]
  },
  computed: {
    urls() {
      return {
        facebookUrl: 'facebook.com',
        twitterUrl: 'twitter.com'
      };
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div v-for="item in items">
    {{urls[`${item.name}Url`]}}
  </div>
</div>

Answer 2

Вы не можете получить доступ к вычисляемому свойству с помощью динамической строки.Если вы не хотите использовать метод поиска, у вас есть 2 варианта.

Добавить URL к элементу.

:href="item.url"

Вернуть карту из ваших вычисленных объектов, реквизитов, данных и т. Д..

:href="urls[item.name]}"

urls(){return {facebook:facebook.com, twitter:’twitter.com’} }