Vue-devtools: When contained in a mixin, computed function does not show up in dev tool

Created on 15 Mar 2017  路  1Comment  路  Source: vuejs/vue-devtools

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

Most helpful comment

Already fixed by #274, will have a new release soon.

>All comments

Already fixed by #274, will have a new release soon.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sparlos picture sparlos  路  3Comments

trollderius picture trollderius  路  3Comments

Gedminas picture Gedminas  路  3Comments

jonathantizard picture jonathantizard  路  4Comments

ispal picture ispal  路  4Comments