title: Style an item in a list based on its property in Vuejs
body: <p>I am very new to Vuejs, so please pardon me if this is something very common. But I am trying to style an item based on the condition of whether the name of the item is equal to another object.</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;subMenuWrapper&quot;&gt;
      &lt;ul id=&quot;subMenuList&quot;&gt;
        &lt;li v-for=&quot;menu in SubMenuItems&quot; v-bind:class=&quot;{activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle}&quot;&gt;{{menu.name}}&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'subMenuWrapper',
    data() {
      return {
        SubMenuItems: [
          {
            name: 'IN THEATERS',
          },
          {
            name: 'COMING SOON',
          },
        ],
        activeSubMenuItem: 'IN THEATERS',
      }
    },
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  .activeSubMenuItemStyle {
    font-weight: bold;
    color: #e4bb23;
    padding: 8px 0;
  }
  
  .subMenuItemStyle {
    font-weight: bold;
    color: #e4bb23;
    padding: 8px 0;
  }
  &lt;/style&gt;
  </code></pre>
  <p>This is giving me an error:</p>
  <blockquote>
  <p>Vue template syntax error:</p>
  <ul>
  <li>invalid expression: v-bind:class=&quot;{activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle}&quot;</li>
  </ul>
  </blockquote>
  <p>How can I style an item in a list based on its properties?</p>
  <p><strong>Update:</strong></p>
  <p>Tried this way too:</p>
  <pre><code>&lt;li v-for=&quot;menu in SubMenuItems&quot; v-bind:class=&quot;[activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle]&quot;&gt;{{menu.name}}&lt;/li&gt;
  </code></pre>
  <p>and added the <code>activeSubMenuItemStyle</code> and <code>subMenuItemStyle</code> into the <em>data</em> with style properties.</p>
  <p>This is not giving any errors, but the item has no styles</p>