web-dev-qa-db-fra.com

Comment définir un composant de données non réactives dans Vue 2?

J'ai un tableau de catégories, qui est chargé une fois (dans le crochet créé), puis il est statique tout le temps. Je rend les valeurs de ce tableau dans un modèle de composant.

<template>
    <ul>
        <li v-for="item in myArray">{{ item }}</li>
    </ul>
</template>

Ma propriété de données ressemble (elle n'inclut pas myArray - je ne veux pas de liaison réactive):

data() {
    return {
        someReactiveData: [1, 2, 3]
    };
}

Mon crochet de création:

created() {
    // ...
    this.myArray = ["value 1", "value 2"];
    // ...
}

Le problème est que Vue erreur de projection - je ne peux pas utiliser myArray dans un modèle, car cette variable n'est pas créée lorsque le DOM est créé - monté.

Alors comment le faites vous? Ou où peuvent être stockées les constantes des composants?

javascriptvue.jscomponentsvuejs2
19
Dave

Vue définit toutes les propriétés de l'option data sur les setters/getters pour les rendre réactifs. Voir Réactivité en profondeur

Comme vous voulez que myArray soit statique, vous pouvez le créer comme une option personnalisée accessible à l'aide de vm.$options

export default{
    data() {
        return{
            someReactiveData: [1, 2, 3]
        }
    },
    //custom option name myArray
    myArray: null,
    created() {
        //access the custom option using $options
        this.$options.myArray = ["value 1", "value 2"];
    }
}

vous pouvez parcourir ces options personnalisées dans votre modèle comme suit:

<template>
    <ul>
        <li v-for="item in $options.myArray">{{ item }}</li>
    </ul>
</template>

Voici le violon

21
Vamsi Krishna

En fait, la définition des propriétés sur this dans created() devrait fonctionner hors de la boîte:

<template>
  <div id="app">
    <ul>
      <li v-for="item in myArray" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    this.myArray = [
      'item 1',
      'item 2'
    ];
  }
};
</script>

rendra

<div id="app">
  <ul>
    <li>
      item 1
    </li>
    <li>
      item 2
    </li>
  </ul>
</div>

Démonstration ici: https://codesandbox.io/s/r0yqj2orpn .

11
BogdanL

Je préfère utiliser des données statiques (non réactives) comme ceci:

  1. Créez un mixin (je le nomme static_data.js) avec le contenu suivant

    static_data.js

  2. Dans vos composants où vous souhaitez utiliser des données statiques, vous pouvez:

ExampleComponent.vue

Remarque: Le génie de ce code est samuelantonioli dans les commentaires ici .

3
roli roli

Si vous voulez le garder dans data, la bonne façon utilise Object.freeze () , comme décrit dans la documentation :

La seule exception à cela est l'utilisation de Object.freeze (), qui empêche les propriétés existantes d'être modifiées, ce qui signifie également que le système de réactivité ne peut pas suivre les modifications.

2
rpadovani