Propriétés déclarées à `false` qui se retrouvent 'undefined' dans Firefox mais bien `false` avec Chrome

Bonjour à tous,

Lorsque je déclare une propriété à false dans mon instance de Vue et j’utilise cette propriété dans mon code, par exemple, si je fais un if dessus, dans Firefox, elle va être undefined.

J’ai testé dans Chrome, ma propriété est bien à false

Ce qui est étrange aussi c’est qu’avec l’extension de débug pour Vue, ma propriété est bien false que ce soit avec l’extension sur Firefox ou Chrome.

Mais quand j’utilise une propriété à true, pas de souci, que ce soit Firefox ou Chrome.

J’ai testé avec Firefox 67.0.4, Firefox Developer Edition 68.0b13 et Chrome 75.0.3770.100

Voici du code permettant de reproduire le bug :

import Vue from 'vue'

var app = new Vue({
   el: '#app',
   data: {
       foo: false,
       bar: true
   },
   mounted() {
       console.log(foo)  // Affiche undefined dans FF, false dans Chrome
       console.log(bar) // Affiche bien true dans FF et Chrome
   }
}

Ma question est donc la suivante, est-ce un bug dans Vue ou un bug dans le moteur JS de Firefox ?

Merci pour vos avis éclairés :slight_smile:

Il faut utiliser this.foo et this.bar

Effectivement, j’ai oublié les this et une parenthèse fermante à la fin aussi :confused: Et je n’arrive plus vraiment à reproduire mon bug…

Néanmoins avec ce code suivant :

ìndex.html

<!DOCTYPE html>
<html>
    <head>
        <title>Bug Vue/Firefox</title>
    </head>
    <body>
        <h1 id="app">Hello, check console :)</h1>

        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="index.js"></script>
    </body>
</html>

index.js

var app = new Vue({
    el: '#app',
    data: {
        foo: false,
        bar: true
    },
    mounted() {
        console.log(this.foo)
        console.log(this.bar)
        console.log(this.$data)
    }
})

Dans la console Firefox, j’ai :

Et dans la console Chrome, j’ai :

chrome

Je retrouve foo qui est à undefined quand je print les propriétés dans Firefox.

data devrait être une fonction qui retourne un object (pas un objet directement)
avec ça, le problème persiste ?