Skip to content

When contained in a mixin, computed function does not show up in dev tool #284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kevinhofmaenner opened this issue Mar 15, 2017 · 1 comment

Comments

@kevinhofmaenner
Copy link

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

export const fruitMixin = {
  data() {
    return {
      fruits: ['apple', 'orange', 'grape', 'strawberry'],
      filteredFruit: ''
    }
  },
  computed: {
    fruitsFiltered() {
      return this.fruits.filter((fruit) => {
        return fruit.match(this.filteredFruit)
      })
    }
  } 
}
@yyx990803
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants