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