Vue class binding attribute and multiple tailwind classes-CodePudding

I'm trying to bind an attribute and multiple tailwind classes to an html element. This is for a tab menu, so the idea is that for the "active" tab I take the title dynamically and inject also some tailwind classes to change the look and feel of the "active" tabs.

        <li
            :
            @click.stop.prevent="selectedTitle = title"
            v-for="title in tabTitles"
            :key="title"
            role="presentation"
        >

At the moment the previous code is not working for me.

CodePudding user response：

From my point of view following line can't work:

selected ? ['border-b-2', 'border-blue-700' ]

This is a short if else without an else case - I think you ment writing something like this:

<li :>

CodePudding user response：

Try like following:

new Vue({
  el: "#demo",
  data() {
    return {
      tabTitles: ['aaa', 'bbb', 'ccc'],
      selectedTitle: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y lMz2Mklv18 r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1 68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
  <li :
      @click.stop.prevent="selectedTitle = title"
      v-for="title in tabTitles"
      :key="title"
      role="presentation"
  >{{title}}</li>
</div>