2017-07-19 204 views
3

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

有沒有辦法在mouseover事件中刪除過濾器,以便div不會被截斷?謝謝!

編輯:showAll()功能是我認爲我會刪除它的地方。我嘗試了幾種方法去除過濾器,例如:

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

和:

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

但是這是我迷路了......

+0

當你將鼠標放置做任何事情發生嗎?你可以包含'showAll'的代碼嗎? – Libby

回答

2

showAll布爾數據屬性和使用template標籤來確定要通過v-ifv-else指令顯示哪個版本的word.english

<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.

0

這應該有效。

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

處理這種問題的最簡單方法是設置一個布爾標誌,然後根據該標誌的潛在存在性過濾計算屬性。這允許您緩存該值,並且只需要一個元素而不是兩個條件觀察器。

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

但是這個解決方案對我很有幫助,我忽略了提到它在v-for循環中。有什麼辦法可以防止所有div發生的行爲,只適用於我所徘徊的那個? – lnamba

+0

@DavidL這絕對不是冗長的,是一個完全有效的解決方案。但是,我發現在實踐中,能夠看到組件模板中潛在的DOM更改非常有幫助。絕對是一個灰色地帶。但在這種情況下,我認爲能夠看到模板中這四行代碼中'showAll'變量的效果比不得不跳轉到計算方法的定義以查看'showAll'變量是否相關以及它會影響什麼。 – thanksd

+0

@ lnamba需要了解你是如何編碼的。如果你無法弄清楚,請發表另一個問題。 – thanksd