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

Question

我开发了一个过滤器来替换字符串，如果我像这样使用它，该过滤器效果很好： 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.

Answer 1

您不能使用像JAVA_HOME=C:\Program Files\Java\jdk1.8.0_121 这样的过滤器，因为v-model="data | filter"是vue的自定义指令。

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

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"指令，您将不得不做一些额外的工作。