CODEWITHSUNDEEP
vuejs2nativescript-vue
yoyojs
yoyojs

Reputation: 1773

import string from a js file in nativescript-vue app

I have in a db folder a db.js file where i want to store long text to include in my app : 

const db = {
    sodiumlaurylsulfate: "Essentiellement exploité comme tensioactif (qui permet aux corps gras de la formule de se disperser dans l’eau), le sodium lauryl sulfate est un irritant bien connu, les scientifiques le savent depuis des décennies. Il n’est qu’à compulser leurs publications pour s’en convaincre : ici on le désigne comme « l’irritant standard », là, on introduit le propos par « le sodium lauryl sulfate (SLS), un tensioactif fréquemment utilisé pour induire expérimentalement des dermatites de contact »… Cet ingrédient est malgré tout présent dans un très grand nombre de références. Mais ce sont le plus souvent des produits rincés, les doses ne sont pas forcément très élevées et certains consommateurs le supportent bien. Chez d’autres, en revanche, les produits lavants laissent la peau inconfortable (attention en particulier avec les produits pour enfants et ceux destinés aux zones intimes) et les dentifrices provoquent des aphtes. A noter que le sodium laureth sulfate est nettement moins irritant."
}

module.exports = {db};

and in my template i call it like that :

 <template>
    <StackLayout>
        <TextView :text="db.sodiumlaurylsulfate"></TextView>
    </StackLayout>
</template>

<script>
import { db } from "../db/db.js";
export default {
    mounted() {
       console.log(db.sodiumlaurylsulfate) // this works !
    }
}
</script>

when i log my text on mounted it works but it makes an error in the TextView component.

System.err: com.tns.NativeScriptException:
System.err: Calling js method getView failed
System.err: TypeError: Cannot read property 'sodiumlaurylsulfate' of 
undefined
System.err: File: "<unknown>, line: 3, column: 1489
System.err: StackTrace:

it seems im doing something in a bad way here.

Upvotes: 0

Views: 344

Answers (1)

raina77ow
raina77ow

Reputation: 106375

Properties in templates are evaluated against component state, not its lexical scope. Assign db to be a property of state (in data() section), and it should work:

import { db } from "../db/db.js";
export default {
    data() {
      return { db }
    },
    mounted() {
       console.log(this.db.sodiumlaurylsulfate); // should work too
    }
}

Upvotes: 1

Related Questions