Question

我有一组计算数据，每个数据都返回一个url-

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

在模板中，我有一个v-for循环，在每个项目中，我都有一个“名称”（名称：“ facebook”，名称：“ twitter”）

现在，我要像这样将它们的计算URL绑定在一起（我尝试了几种方法，所有方法都相同）-

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

但是我没有得到计算值，而是得到了字符串...

是的，我知道我可以使用带有param的方法来返回值...

Answer 1

您不能使用动态字符串访问计算的属性。如果您不想使用查找方法，则有两个选项。

将网址添加到项目中。

:href="item.url"

从计算出的，道具，数据等中返回地图。

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

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

Answer 2

您可以进行一次计算，以返回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>

vuejs-如何从字符串插值绑定计算的属性

2 个答案: