Vue.js 在VueJS中的字符串中使用动态ID

我正在为选项卡组件使用UIKit库，该组件侦听以id为目标的

uk tab

属性。问题是，它为每个选项卡组件创建相同的id。我喜欢UI，但不管是谁想到了这个，都没有想太多。我可以通过使id动态来修复它，但在uk选项卡属性中调用它时遇到问题，因为它正在呈现字符串。来自react的背景，我会使用字符串文字和一些JSX，比如

#item-${u id}

来显示#item-12、#item-13……等等。但这不起作用。如何在Vue中执行此操作

下面是一个如何工作的示例

<div class="mytrigger">
    <ul uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
    <ul id="component-tab-left" class="uk-switcher">
</div>

下面是一个例子，说明我需要什么

<div class="mytrigger">
    <ul uk-tab="connect: #_uid+'switcher'; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
    <ul :id="_uid+'switcher'" class="uk-switcher">
</div>

查看开发工具。它应该是810switcher，但却将其作为字符串

有什么想法吗？谢谢

您可以在vue中的数据绑定中使用。因此，如果将字符串模板绑定到属性，它将填充您期望的内容

<ul :uk-tab="`connect: #${uid}switcher`'; animation: uk-animation-fade">

我相信您需要的是：

或者，如果您不喜欢使用反勾号：

输出将是：

请注意：

使用

：

是

v-bind:

的缩写，但不要让名称混淆

v-bind

不一定绑定任何东西，它只是使属性值成为一个JavaScript表达式

我避免在元素ID的开头使用数字，我在过去看到过这会导致问题。最好把数字放在最后

\u uid

开头的下划线表示它是Vue专用的。对于它将采取什么形式，或者它是否会继续存在，没有任何保证

---

使用

data-uk-tab

代替下面的

uk-tab

<div class="mytrigger">
    <ul data-uk-tab="{connect: `#${_uid}switcher`, animation: 'uk-animation-fade'}">
</div>
<div class="mytargetedtab">
    <ul :id="_uid+'switcher'" class="uk-switcher">
</div>

---

更多信息=>

我想你就快到了，只要把

：

放在

uk选项卡之前，你的
\uUID
就可以绑定了。就是这样！它正是我想要的，但令我惊讶的是，这两个元素都需要相同的component tab id才能工作，因为它将它视为一个css类：：：facepalm：：然后根据该id，它在其核心文件中的某个地方发布了一个带有Javascript的英国活动类。唉。尽管如此，你的解决方案还是符合我的要求。太遗憾了，它并没有真正解决问题。