CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
PenAndPapers
PenAndPapers

Reputation: 2108

Vue how to call filter from parent

How can I be able to call filter of parent using single file component. Below are my code.

app.js

import computed from '../vue/mixins/computed.js';
import filters from '../vue/mixins/filters.js';
import methods from '../vue/mixins/methods.js';

const app = new Vue({
    el: '#app',
    mixins:[
        computed,
        filters,
        methods
    ],
    mounted: function() {

    }
});

home.vue

<template>
    <div class="home-content">
        <h3>{{home | uppercase}}</h3>
    </div>
</template>
<script type="text/javascript">
    export default {
        data: function() {
            return {
                home: 'home'
            }
        },
        mounted: function() {
            this.$parent.$options.methods.makeConsole();
        }
    }
</script>

It's giving me this warning in console "Failed to resolve filter: uppercase"

Upvotes: 0

Views: 2040

Answers (2)

reinerBa
reinerBa

Reputation: 1660

  • You should just make the filter global available before starting the root instance with 

    Vue.filter('uppercase', uppercase);

    Where uppercase can be a simple function like 

    function uppercase(str)
  return str.uppercase();
}

    That would be the most simple and reliable way to use the filter on all vue components;

  • If you import your filters to your parent via mixins why don't you use that mixin in the child?

  • Please do not use the this.$parent-method as it makes your child component statical dependend of that parent.

    • To use the $parent approach you may need to declare the filter function from the parent as a filter in the child:

      filters:{ uppercase: this.$parent.$options.filters.uppercase }

Upvotes: 5

blockhead
blockhead

Reputation: 9705

There is no point. Just include your mixin in the child as well. A component should ideally be autonomous, and not aware of where it is in the hierarchy of components (at least not the ones above or on the same level.

Upvotes: 0

Related Questions