首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在VueJS中创建包含过滤/转换数据的可点击锚点标记

如何在VueJS中创建包含过滤/转换数据的可点击锚点标记
EN

Stack Overflow用户
提问于 2018-12-07 04:11:31
回答 1查看 233关注 0票数 1

我有一个VueJS应用程序,它具有以下(外部提供的)数据样式:

代码语言:javascript
复制
data: function() {
  return {
    posts: ['1:foo bar oof rab', '2:bar oof rab foo', '3:oof rab foo bar']
  }
}

我希望我的模板循环通过帖子,并使分号左侧的所有内容都成为可单击的锚点标记:

代码语言:javascript
复制
<li><a id="1" href="#1">1</a>:foo bar oof rab</li>
<li><a id="2" href="#2">2</a>:bar oof rab foo</li>
<li><a id="3" href="#3">3</a>:oof rab foo bar</li>

使用过滤器很容易将文本从锚点位置拆分出来:

代码语言:javascript
复制
<template>
  <div>
    <v-for="post in posts">
      <li>{{ post | trimAnchor }}:{{ post | trimPost }}</li>
    </v-for>
  </div>
</template>

filters: {
  trimPost: function(value) {
    value = value.toString();
    return value.split(':')[1]
  },
  trimAnchor: function(value) {
    value = value.toString();
    return value.split(':')[0]
  },
  hashAnchor: function(value) {
    value = value.toString();
    return '#'+value.split(':')[0]
  }

但过滤器在v-bind或router-link中不起作用:

代码语言:javascript
复制
<li>
  <div :id="{{ post | hashAnchor }}">
    <router-link="{{ post | hashAnchor }}">
      {{ post | trimAnchor }}
    </router-link>
  </div>
  :{{ post | trimPost }}
</li>

获得我想要的输出的正确方法是什么?我应该使用computed吗?如果应该,如何使用?

感谢您的帮助。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-07 04:31:29

在这种情况下,我总是建议使用计算属性。它让你的模板保持整洁,并让你在准备数据时有更大的自由度。由于它是一个计算属性,如果您的数据发生更改,它将自动重新计算。

第一部分是创建包含所需所有必要部分的对象:

代码语言:javascript
复制
computed: {
  anchors () {
    if (!this.posts) {
      return [];
    }

    return this.posts.map(
      identifier => {
        const [anchor, text] = identifier.split(':', 2);

        return {
          anchor,
          text
        }
      }
    )
  }
}

然后在你需要的地方解构它。我还在你的v-for中添加了一个键,假设第一部分是唯一的。如果你的锚点要工作的话,就需要这样做。

代码语言:javascript
复制
<template>
  <div>
    <v-for="{ anchor, text } in anchors" :key="anchor">
      <li><a :href="`#${anchor}`">{{ anchor }}</a>:{{ text }}</li>
    </v-for>
  </div>
</template>

当然,如果需要,您可以在link或li body上使用过滤器。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53658959

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档