마우스 오버 시 Vue 사용자 지정 필터 제거

마우스 오버 시 Vue 사용자 지정 필터 제거

VueJs 2를 사용하여 마우스 오버 시 잘라내기 필터를 제거하고 싶습니다.템플릿의 필터는 다음과 같습니다.

<div class="eng" @mouseover="showAll">{{ word.english | truncate }}</div>

필터 자체는 다음과 같습니다.

filters: {
    truncate: function(value) {
      let length = 50;
      if (value.length <= length) {
        return value;
      } else {
        return value.substring(0, length) + '...';
      }
    }
 },

마우스 오버 이벤트에서 필터를 제거하여 div가 더 이상 잘리지 않도록 하는 방법이 있습니까?감사합니다!

편집:showAll()기능을 없애야겠다고 생각했어요.필터를 제거하기 위해 다음과 같은 몇 가지 방법을 시도했습니다.

showAll(){
  console.log('being mousedover');
  this.truncate = false
},

또, 다음과 같이 합니다.

showAll(){
  console.log('being mousedover');
  !this.truncate
}

하지만 난 여기서 길을 잃었어...

만들다showAll부울 데이터 속성 및 용도template태그에 따라 어떤 버전의word.english를 통해 표시하다v-if그리고.v-else지시:

<div class="eng" @mouseover="showAll = true">
  <template v-if="showAll">{{ word.english }}</template>
  <template v-else>{{ word.english | truncate }}</template>
</div>

여기 작동하는 바이올린이 있습니다.

이를 처리하는 가장 깨끗한 방법은 부울 플래그를 설정한 다음 플래그의 잠재적 존재에 따라 계산된 속성을 필터링하는 것입니다.이를 통해 값을 캐시할 수 있으며 2개가 아닌 1개의 조건부 워처가 있는 단일 요소만 필요합니다.

HTML

<div class="eng" @mouseover="showAll = true" @mouseout="showAll = false">
  {{getWord}}
</div>

JS

export default {
    data() {
        return {
            showAll: false,
            word: {}
        }
    },
    computed: {
        getWord: function () {
            if (this.showAll) return this.word.english

            let value = this.word.english;
            let length = 50;
            if (value.length <= length) {
                return value;
            } else {
                return value.substring(0, length) + '...';
            }
        }
    }
}

이거면 될 거야.

data(){
    return {
      shouldTruncate: true
    }
},
methods: {
    showAll() {
        this.shouldTruncate = false
    }
},
filters:{
    truncate(value) {
        let length = 50;
        if (value.length <= length || !this.shouldTruncate) {
            return value;
        }
        else {
            return value.substring(0, length) + '...';
        }
    }
}

언급URL : https://stackoverflow.com/questions/45196501/removing-a-vue-custom-filter-on-mouseover