如何在 VueJs 中使用过滤器来过滤输入值？答案

【问题标题】：How to use filters in VueJs to filter the input value?如何在 VueJs 中使用过滤器来过滤输入值？
【发布时间】：2019-12-19 16:17:08
【问题描述】：

我开发了一个过滤器来替换字符串，如果我像这样使用它，这个过滤器效果很好： External link{{updateTraining.externalUrl|replaceHttp}}

我也想在输入值v-model="updateTraining.externalUrl |replaceHttp " 中使用它，但它不起作用！

                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label for="inputTitle">External link{{updateTraining.externalUrl|replaceHttp}}</label>
                                             <input autocomplete="nope" class="form-control" id="externalUrl"
                                                    placeholder="External link" type="text"
                                                    v-model="updateTraining.externalUrl">
                                            <small class="form-text  text-danger" v-if="errors.externalUrl"> {{errors.externalUrl[0]}} </small>
                                        </div>
                                    </div>

错误信息是：

Property or method "replaceHttp" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

【问题讨论】：

标签： vue.js

【解决方案1】：

您不能使用像 v-model="data | filter" 这样的过滤器，因为 v-model 是 vue 的自定义指令。

如果您想使用v-model 应用过滤器，您需要使用这样的计算属性

<input v-model="filteredData" />

export default{
  data(){
       return {
              data: ''
          }
    }
},
computed: {
    filteredData: {
         get() {
            // do whatever filtering
            return this.data
         },
         set(newValue) {
           // do whatever filtering
           return newValue
         }
    }
}

但是我看到人们使用:value="data | dataFilter"，但你将不得不做一些额外的工作，因为你没有使用v-model 指令。

【讨论】：