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 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>
<input type="text" v-model="filteredFruit">
<ul>
<li v-for="fruit in fruitsFiltered">{{ fruit }}</li>
</ul>
<hr>
<app-list></app-list>
</div>
</template>
<script>
import List from './List.vue'
import { fruitMixin } from './fruitMixin'
export default {
mixins: [fruitMixin],
components: {
'app-list': List
},
data() {
return {
fruits: ['apple', 'orange', 'grape', 'strawberry'],
filteredFruit: ''
}
},
computed: {
fruitsFiltered() {
return this.fruits.filter((fruit) => {
return fruit.match(this.filteredFruit)
})
}
}
}
</script>
List.vue
<template>
<div>
<h1>Filters & Mixins (List.vue)</h1>
<hr>
<input type="text" v-model="filteredFruit">
<ul>
<li v-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>
````
fruitMixin.js
```javascript
export const fruitMixin = {
data() {
return {
fruits: ['apple', 'orange', 'grape', 'strawberry'],
filteredFruit: ''
}
},
computed: {
fruitsFiltered() {
return this.fruits.filter((fruit) => {
return fruit.match(this.filteredFruit)
})
}
}
}
Already fixed by #274, will have a new release soon.
Most helpful comment
Already fixed by #274, will have a new release soon.