使用過濾器渲染 html

Question

我需要編寫一個呈現 html 標簽的過濾器。 這是我的過濾器：

filters: {
  limitStrLength: function (value, maxLength) {
    if (value && value.length > maxLength) {
      let partialVal = value.substr(0, maxLength) + "...";
      return "<span title='" + value + "' >" + partialVal + "</span>";
    } else {
      return value;
    }
  }
}

我的問題是我無法呈現原始 html。

如果我只是這樣做：

<div>{{ productName  | limitStrLength(6) }}</div>

html 標簽呈現為字符串（即，我在屏幕上看到類似<span title=... ）。

我也嘗試使用v-html屬性：

<div v-html="productName | limitStrLength(6)"></div>

但我收到一個錯誤：

屬性或方法“limitStrLength”未在實例上定義，但在渲染期間被引用。

任何的想法？

Answer 1

嘗試這個：

<div v-html="$options.filters.limitStrLength(productName, 6)"></div>

來源： Github 問題