1
votes

Comment accéder à une propriété de données Vuejs à partir d'une autre propriété de données?

Voici mon code

data: {
     cat1 : {name: "Category 1", reference : false},
     cat2 : {name: "Subcategory 2", reference: this.cat1}
}

Quand je vais appeler this.cat2.reference depuis n'importe quelle fonction, cela me donne la valeur false. Je ne veux pas déclarer le cat1 à l'extérieur quelque part et faire référence ici. Je veux exactement la même structure que ci-dessus pour que je puisse obtenir la référence cat2 parfaitement.

Quelqu'un pourrait-il me conseiller une solution?

vue.js vuejs2 vuejs3

0 commentaires

3 Réponses :

-1
votes

Vous pouvez définir la référence comme une fonction qui renverra this.data.cat1:

var referenceOfCat2 = this.data.cat2.reference();
//referenceOfCat2 = {name: "Category 1", reference : ()=> {return null}}

Pour obtenir la référence du cat2, vous devrez l'appeler en tant que fonction :

data: {
     cat1 : {name: "Category 1", reference : ()=> {return null;}},
     cat2 : {name: "Subcategory 2", reference: ()=> {return this.data.cat1;}}
}

Bien que si vous essayez d'appeler cette fonction en dehors du composant lui-même, cela ne fonctionnera pas. Si vous voulez passer cat2 à un autre composant, vous devrez définir sa référence (appelez la fonction ref) avant de le passer, sinon une fois qu'il atteindra l'autre composant, la cible de données ne sera pas la même (sauf quelques ajustements) et la référence () ne fonctionnera pas

2 commentaires

ne fonctionne pas pour appeler la référence cat1 comme fonction. Obtenir cette sortie "reference: ƒ reference ()" pour la valeur de this.cat2.reference

n'oubliez pas le () après la référence, car c'est une fonction - cela fonctionne très bien pour moi, j'obtiens {name: "Category 1", reference: () => {return null;}} lors de l'appel de this.data. cat2.reference ()

3
votes

Une option serait de créer votre objet data avec des méthodes getter

Par exemple

new Vue({
  el: '#newUser',
  data: () => { // make sure to use a "data" function
    // initialise with a declared variable
    const formData = {
      cat1, // not sure where these come from
      cat2,
      cat3,
      cat5: { name: 'Subcategory 5', get reference() { return formData.cat1 }}
    }
    return { formData }
  }
}

Démo ~ https://jsfiddle.net/ztfgapxh/

2 commentaires

Cela n'a pas fonctionné pour moi. Veuillez visionner cette vidéo streamable.com/kw9wa9 et me donner une solution possible. C'était mon code entier et appliqué pour cat5. new Vue ({el: "#newUser", data: {formData: {cat1, cat2, cat3, cat5: {get reference () {return formData.cat1}},},},});

@ShamimSdr Je pense que vous devez regarder de plus près ma réponse, en particulier le bit qui dit "assurez-vous d'utiliser une fonction de données"

1
votes

Je pense que vous serez mieux en utilisant une propriété calculée:

data: {
  cat1 : {name: "Category 1", reference : false}
}
computed: {
  cat2() {
    return {name: "Subcategory 2", reference: this.cat1}
  }
}

Vous pouvez maintenant appeler this.cat1 et this.cat2 code > mais cat2 sera mis à jour chaque fois que cat1 change.

https: // vuejs.org/v2/guide/computed.html

EDIT: si vous voulez gérer tous les catX de manière cohérente, vous pouvez tous les être des propriétés calculées

2 commentaires

Cela fonctionne mais je veux faire la référence à partir de la propriété de données et non de l'extérieur quelque part. Est-ce possible d'une manière ou d'une autre?

Pourquoi voulez-vous avoir cela sur la déclaration de données et non comme une propriété calculée? Je ne sais pas comment faire ce que vous demandez, mais je ne comprends pas pourquoi vous voulez cela spécifiquement