How to use filters in VueJs to filter the input value?

Question

I developed one filter to replace string, this filter works very well if I user it like : External link{{updateTraining.externalUrl|replaceHttp}}

I would like to use it also in the input value v-model="updateTraining.externalUrl |replaceHttp " but it's not working !

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

The error message is :

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.

TJ Weems · Accepted Answer · 2019-12-19 16:58:58Z

2

You cannot use a filter like this v-model="data | filter" as v-model is a custom directive from vue.

If you want to apply a filter using v-model you need to use a computed property like so

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

However I have seen people use :value="data | dataFilter" but you will have to do a little bit of extra work because you are not using the v-model directive.

answered Dec 19, 2019 at 16:58

TJ Weems

1,1143 gold badges22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use filters in VueJs to filter the input value?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related