Removing a Vue custom filter on mouseover Removing a Vue custom filter on mouseover vue.js vue.js

Removing a Vue custom filter on mouseover


Make showAll a Boolean data property and use template tags to determine which version of word.english to display via the v-if and v-else directives:

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

Here's a working fiddle.


The cleanest way to handle this is to set a boolean flag, and then filter a computed property based on the potential existence of the flag. This allows you to cache the value and you only need a single element with one conditional watcher instead of two.

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) + '...';            }        }    }}


This should work.

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) + '...';        }    }}