Class binding Error in vue file

[BboyAwey]

• VSCode Version: Code 1.13.0 (376c52b, 2017-06-08T16:43:13.058Z)
• OS Version: Windows_NT ia32 10.0.14393
• Extensions:

Extension	Author	Version
html-class-suggestions	AndersEAndersen	1.0.7
vscode-eslint	dbaeumer	1.2.11
vscode-instant-markdown	dbankier	1.1.0
auto-close-tag	formulahendry	0.4.2
auto-rename-tag	formulahendry	0.0.12
vue-snippets	hollowtree	0.1.2
vscode-icon-theme	jtlowe	1.5.0
vetur	octref	0.7.0
vscode-icons	robertohuertasm	7.9.0
sass-indented	robinbentley	1.4.1
vim	vscodevim	0.8.5
vscode-todo-highlight	wayou	0.5.5

---

Steps to Reproduce:

1. when I write some condition exps in class binding exp, like this:

<span class="admin-previewer-prev" @click.stop="prev" :class="{ 'admin-previewer-disabled': !image || !image.length || localCurrent > }"></span>

it start to be very very slow when type in that :class="" exp and sometimes just can not type in this file normally, but other file still be fine.
my platform is win10 with the latest updatings.
my file is like this:

<style lang="scss">
  @import '../style/vars';
  .admin-previewer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    padding-top: 56px;
    text-align: center;
    background-color: rgba(0, 0, 0, .75);
    .admin-previewer-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 56px;
      padding: 0 24px;
      line-height: 56px;
      text-align: left;
      font-size: $medium;
      color: #fff;
      background-color: #000;
    }
    .admin-previewer-close-icon {
      float: right;
      font-size: 24px;
      cursor: pointer;
    }
    .admin-previewer-content {
      position: relative;
      height: 100%;
      width: 100%;
      padding: 2% 0;
      vertical-align: middle;
      user-select: none;
    }
    .admin-previewer-va-helper {
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
    .admin-previewer-content > img {
      vertical-align: middle;
      max-width: 90%;
      max-height: 90%;
    }
    .admin-previewer-next,
    .admin-previewer-prev {
      display: inline-block;
      position: absolute;
      left: 0;
      top: 50%;
      width: 72px;
      height: 96px;
      margin-top: -48px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      vertical-align: middle;
      text-align: center;
      cursor: pointer;
    }
    .admin-previewer-next:hover,
    .admin-previewer-prev:hover {
      background-color: rgba(0, 0, 0, .3);
    }
    .admin-previewer-next:after,
    .admin-previewer-prev:after {
      content: "";
      display: inline-block;
      position: relative;
      top: 50%;
      left: 6px;
      margin-top: -14px;
      width: 28px;
      height: 28px;
      border-left: 1px solid #fff;
      border-top: 1px solid #fff;
      transform: rotate(-45deg);
    }
    .admin-previewer-next {
      left: auto;
      right: 0;
      transform: rotate(180deg);
    }
  }  
</style>
<template>
  <div class="admin-previewer" ref="previewer" v-show="localDisplay">
    <div class="admin-previewer-header" ref="header">
      <span class="admin-previewer-name">{{ currentImgAlt }}</span>
      <admin-icon
        type="ion-android-close"
        class="admin-previewer-close-icon"
        @click.native="close"/>
    </div>
    <div class="admin-previewer-content" ref="content" @click.stop="close">
      <span class="admin-previewer-prev" @click.stop="prev" :class="{ 'admin-previewer-disabled': !image || !image.length || localCurrent > }"></span>
      <i class="admin-previewer-va-helper"></i>
      <img v-for="(img, i) in images" :src="img.src" v-show="i == localCurrent" :alt="img.alt">
      <span class="admin-previewer-next" @click.stop="next" v-show="images && images.length && localCurrent < images.length "></span>
    </div>
  </div>
</template>
<script>
  // Author: Awey
  // email: chenwei@rongcapital.cn
  // github: https://github.com/BboyAwey
  // blog: http://www.jianshu.com/u/3c8fe1455914
  
  // Modifier:
  import AdminIcon from './admin-icon'

  export default {
    name: 'admin-previewer',
    component: { AdminIcon },
    mounted () {
      window.document.body.appendChild(this.$refs.previewer)
    },
    data () {
      return {
        localDisplay: this.display,
        localCurrent: this.current || 0
      }
    },
    props: {
      display: [String, Boolean],
      current: [Number, String],
      images: Array
    },
    computed: {
      currentImgAlt () {
        if (this.images && this.images.length) {
          return this.images[this.localCurrent].alt
        } else if (this.localImgs && this.localImgs.length) {
          return this.localImgs[this.localCurrent].alt
        } else {
          return ''
        }
      }
    },
    watch: {
      display (v) {
        this.localDisplay = v
      },
      localDisplay (v) {
        if (v) window.document.body.appendChild(this.$refs.previewer)
        if (v) this.$emit('admin-previewer-on', this.localCurrent)
        else this.$emit('admin-previewer-off', this.localCurrent)
      },
      current (v) {
        this.localCurrent = v
      },
      localCurrent (v) {
        this.$emit('admin-previewer-change', v)
      }
    },
    methods: {
      close () {
        this.localDisplay = false
      },
      prev () {
        --this.localCurrent
      },
      next () {
        ++this.localCurrent
      }
    }
  }
</script>

[ramya-rao-a]

This is most likely due to the extension you are using for Vue

Can you disable all extensions (run code --disable-extensions) and see if you still see the slowness?

[BboyAwey]

It's caused by the Auto Rename Tag, the problem disapeared when i disable this Auto Rename Tag.
Thanks a lot! I guess i'll create a new issue for them.

[ramya-rao-a]

@BboyAwey Yes please and Happy Coding!