Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Syntax highlighting in Vue files isn't working when using v-bind class with array and string object-keys

See original GitHub issue

I updated VS Code earlier today and now this one file is broken. It seems to have something to do with the code:

<template>
    <div
        :class="['filters-pane', {
            'w-0': !isActive,
            active: isActive,
        }]"
    >

The problem goes away if I remove 'w-0': !isActive,

Background info: when I run VS Code with code . --disable-extensions, all syntax highlighting in the Vue file goes away. I also tried the following steps:

uninstall Volar
restart VS Code
reinstall Volar
restart VS Code

Still broken.

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:6

Top GitHub Comments

1reaction

lloydaarncommented, Jul 15, 2022

@agm1984 my temporary fix was reverting the volar version to 0.38.3

0reactions

agm1984commented, Jul 15, 2022

This is a duplicate of https://github.com/johnsoncodehk/volar/issues/1553

Top Results From Across the Web

VSCode Syntax Highlighting not working with Vue / Vetur

VUE file I work with has no syntax highlighting. I usually have the extension Vetur to help with synthax highlighting and other tweaks...

Class and Style Bindings | Vue.js

Since class and style are both attributes, we can use v-bind to assign them a string value dynamically, much like with other attributes....

Class and Style Bindings - Vue - w3resource

Most commonly, we need data-binding when manipulating an element's class list and its inline styles. Because both of them are attributes, ...

Vue JS 3 Tutorial - 8 - Binding Classes - YouTube

... https://www.facebook.com/codevolutionweb Business - codevolution.business@gmail.com Binding Classes in Vue.js 3 using v - bind ...

Class and Style Bindings | Vue GWT

Again, the object syntax is often used in conjunction with computed properties that return objects. # Array Syntax. The array syntax for v-bind:style...