如何从胡子内的过滤器输出html答案

【问题标题】：How to output html from filter inside mustache如何从胡子内的过滤器输出html
【发布时间】：2016-12-19 22:01:01
【问题描述】：

我有一个输入（右上角），用户可以在其中搜索内容，当它的指令长度获得 3 个字符时，它将显示产品列表并突出显示匹配项...

看看我的代码：

html

<div id="app">
  <div id="header">
    <div class="right"><input type="text" v-model="message" v-on:keyup="searchStart()" v-on:blur="searchLeave()"/>
      <ul v-if="this.searchInput" class="product-list">
      <li v-for="product in products">
        {{ product.id }} - {{ product.name | highlight }} - {{ product.qtd }}</li></ul>
    </div>
  </div>
  <div id="main">
    <div id="menu">fdfds</div>
    <div id="container">{{ message }}</div>
  </div>
</div>

var search = new Vue({
  el: "#app",
  data: {
    message: "",
    searchInput: false,
    products: [
      {
        id: 1,
        name: "produto 01",
        qtd: 20
      },
      {
        id: 2,
        name: "produto 02",
        qtd: 40
      },
      {
        id: 3,
        name: "produto 03",
        qtd: 30
      },
    ]
  },
  methods: {
    searchStart: function(){
      if(this.message.length >= 3)
        this.searchInput = true;
      console.log(this.searchInput);
    },
    searchLeave: function(){
      this.searchInput = false;
      this.message = "";
      console.log(this.searchInput);
    }
  },
  filters: {
    highlight: function(value){
      return value.replace(search.message, '<span class=\'highlight\'>' + search.message + '</span>');
    }
  }
});

在这里你可以看到一支活笔：http://codepen.io/caiokawasaki/pen/dXaPyj

尝试在笔内输入prod...

我的过滤器是否正确？我创建过滤器的方式是否正确？

主要问题是：如何从我的过滤器中输出 HTML？

编辑/解决方案

案例中的问题是codepen，与vue存在某种冲突，所以我无法使用{{{}}}转义html，将代码放在另一个编辑器（jsfidle）中并且它工作.

我接受奖励的答案，因为它是正确的。

【问题讨论】：

Vue 文档建议您应该能够使用三括号 - {{{ variable }}} - 来显示未转义的 HTML。当我尝试更新 HTML 以使用三方括号时，尽管它会引发错误。甚至还有另一个 Stackoverflow 问题被接受为解决方案：stackoverflow.com/questions/30877491/vue-display-unescaped-html
仔细查看您的代码，您是否有任何理由无法在模板中执行此操作：{{ product.id }} - {{ product.name }} - {{ product.qtd }} 它不能解决在模板中显示未转义 HTML 的问题，但它似乎确实实现了您的目标。
@GeorgeMandis 我只想突出显示消息模型中的字符串，而不是整个名称...明白吗？这是潜水我疯了
嗨 Caio，我不知道你的代码有什么问题。我所做的是打开jsfiddle（我不喜欢与codepen 一起工作），获取一个工作示例，然后从那里向上移动。这不是一个解决方案，但希望这将是一个起点：jsfiddle.net/oajqg1n5/11
只需使用三重括号fiddle demo

标签： javascript vue.js

【解决方案1】：

您需要 3 个步骤来实现您想要的：

使用三重大括号 {{{ }}} 显示未转义的 html
按您的 v-model 变量过滤您的用户，以便只显示匹配项
用<span>标签替换匹配的子串

查看计算属性filteredUsers 和此工作jsfiddle 中的过滤器

【讨论】：

有趣的是 codepen 的问题...我很高兴为你工作