如何在VueJS中创建包含过滤/转换数据的可点击锚点标记
如何在VueJS中创建包含过滤/转换数据的可点击锚点标记
提问于 2018-12-07 04:11:31
我有一个VueJS应用程序，它具有以下(外部提供的)数据样式：
data: function() {
return {
posts: ['1:foo bar oof rab', '2:bar oof rab foo', '3:oof rab foo bar']
}
}我希望我的模板循环通过帖子，并使分号左侧的所有内容都成为可单击的锚点标记：
<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>使用过滤器很容易将文本从锚点位置拆分出来：
<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中不起作用：
<li>
<div :id="{{ post | hashAnchor }}">
<router-link="{{ post | hashAnchor }}">
{{ post | trimAnchor }}
</router-link>
</div>
:{{ post | trimPost }}
</li>获得我想要的输出的正确方法是什么？我应该使用computed吗?如果应该，如何使用？
感谢您的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-07 04:31:29
在这种情况下，我总是建议使用计算属性。它让你的模板保持整洁，并让你在准备数据时有更大的自由度。由于它是一个计算属性，如果您的数据发生更改，它将自动重新计算。
第一部分是创建包含所需所有必要部分的对象：
computed: {
anchors () {
if (!this.posts) {
return [];
}
return this.posts.map(
identifier => {
const [anchor, text] = identifier.split(':', 2);
return {
anchor,
text
}
}
)
}
}然后在你需要的地方解构它。我还在你的v-for中添加了一个键，假设第一部分是唯一的。如果你的锚点要工作的话，就需要这样做。
<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上使用过滤器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53658959
复制相关文章
相似问题
腾讯云开发者
