You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The main App.vue component has the fruitsFiltered() computed function natively available while the List.vue component imports it from the fruitMixin.js mixin.
Code to replicate:
App.vue
<template><div><h1>Filters &Mixins(App.vue)</h1><hr><inputtype="text"v-model="filteredFruit"><ul><liv-for="fruit in fruitsFiltered">{{ fruit }}</li></ul><hr><app-list></app-list></div></template><script>importListfrom'./List.vue'import{fruitMixin}from'./fruitMixin'exportdefault{mixins: [fruitMixin],components: {'app-list': List},data(){return{fruits: ['apple','orange','grape','strawberry'],filteredFruit: ''}},computed: {fruitsFiltered(){returnthis.fruits.filter((fruit)=>{returnfruit.match(this.filteredFruit)})}}}</script>
List.vue
<template><div><h1>Filters &Mixins(List.vue)</h1><hr><inputtype="text"v-model="filteredFruit"><ul><liv-for="fruit in fruitsFiltered">{{ fruit }}</li></ul><button @click="fruits.push('watermelon')">Add Item</button></div></template><script>
import {fruitMixin} from './fruitMixin'
export default {mixins: [fruitMixin]}</script>
First off, I have been having a blast learning VueJS! I love the dev tool as well! Great job!
When you import a computed function from a mixin, the devtool does not show the computed function in the component that you imported the mixin to.
Video of the bug in action: https://media.giphy.com/media/3oKIPoysKKURWeBR60/source.mp4
The main
App.vue
component has thefruitsFiltered()
computed function natively available while theList.vue
component imports it from thefruitMixin.js
mixin.Code to replicate:
App.vue
List.vue
fruitMixin.js
The text was updated successfully, but these errors were encountered: