Vue.js propriété calculée ne fonctionne pas

J'ai un objet de données qui a un first_name et last_name et d'une propriété calculée qui renvoie le nom complet, mais la suite ne semble fonctionner dans mon v de la directive?

new Vue({

        el: '#content',

        data: {
          "users": [
            {
              "id": 3,
              "first_name": "Joe",
              "last_name": "Blogs"
            },
            {
              "id": 3,
              "first_name": "Jane",
              "last_name": "Doe"
            }
          ]
       },
        computed: {
           fullName: function (user) {
                return user.first_name + ' ' + user.last_name;
            }

        }

    });



    <tr v-for="user in users | orderBy fullName(user)">
          <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
              {{fullName(user)}} 
         </td>
    <tr>

OriginalL'auteur adam78 | 2015-12-31

computed-properties vue.js

17

Je ne crois pas qu'une propriété calculée en Vue.js peut accepter un argument, ils sont censés être en mesure de se construire sans interaction supplémentaire. Je crois que c'est de votre faute a qui vous avez écrit une méthode et a ensuite essayé d'enregistrer une propriété calculée.

Il devrait donc être une solution simple et il suffit de modifier l'enregistrement de votre fonction de computed à methods qui il est vraiment.
```
methods: {
       fullName: function (user) {
            return user.first_name + ' ' + user.last_name;
        }

    }
```
De cette façon, vous n'aurez pas à modifier votre code.

OriginalL'auteur Azeame
13

Essayer de désactiver le cache sur la propriété calculée, comme mentionné dans https://github.com/vuejs/vue/issues/1189. Ce faisant, la valeur calculée sera toujours recalculées.
```
computed: {
  fullName: {
    cache: false,
    get() {
      return user.first_name + ' ' + user.last_name;
    }
  }
}
```
OriginalL'auteur Fernanda Lemos
2

Les propriétés calculées ne prennent pas en charge la nidification comme ça.

Preuve et certaines solutions/solutions alternatives: https://github.com/vuejs/vue/issues/66

OriginalL'auteur ceejayoz
1

Vous pouvez mapper les utilisateurs de votre calculée de la propriété et de l'utilisation que mappé tableau comme ceci:
```
computed: {
  fullName: function () {
    return this.users.map(
      item => item.first_name + ' ' + item.last_name
    );
  }
}
```
Puis dans la vue, vous pouvez faire quelque chose comme:
```
<tr v-for="(user, item) in users">
   <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
     {{fullName[item]}} 
   </td>
<tr>
```
Et je suis en utilisant es6 flèche de la fonction. Si vous ne souhaitez pas utiliser la flèche de la fonction, alors vous pouvez faire quelque chose comme:
```
return this.users.map(
  function(item) {return item.first_name + ' ' +item.last_name}
);
```
OriginalL'auteur Mali Naeemi
0

j'ai eu un cas similaire, lorsque j'utilise un des accessoires de la propriété avec undecleared propriétés imbriquées. Pour une raison que j'ai fait ce travail en faisant un

console.log(user.first_name)
```
       fullName: function (user) {
            console.log(user.first_name)
            return user.first_name + ' ' + user.last_name;
       }
```
Aussi, j'ai fait ce travail en utilisant une expression lambda
https://stackoverflow.com/a/46234335/726751
```
computed: {
    fullName: _this => {
        return _this.user.first_name + ' ' + _this.user.last_name;
    }
}
```
OriginalL'auteur Jorge Wander Santana Ureña
0

J'ai une question similaire ici: Comment dinamically faire calculée en Vue.js sous chargement dynamique des données.

Mais, à la fin, voici la solution pour vous à partir de la conclusion que j'obtiens après avoir discuter et d'essai et d'erreur. Il existe plusieurs manières:
1. créer extender qui attribuer le calculées à l'intérieur de chaque élément, puis de l'appeler à l'aide item.computedProperty() dans l'INTERFACE utilisateur (avec double support)
2. supposer que les données sont chargées, par exemple items, créez un observateur qui va affecter la calculés pour chaque élément, puis de les mettre à l'intérieur de extendedItems. la fonction calculée deviendra réactif quand il est lié à l'INTERFACE utilisateur, de sorte que l'INTERFACE utilisateur utilisera des extendedItems au lieu de items
3. utilisation vue du this.$set manuellement définir et activer la réactivité de la calculés.
C'est calculée avec la fonction de la solution numéro 1:
```
new Vue({

    el: '#content',

    data: {
      "users": [
        {
          "id": 3,
          "first_name": "Joe",
          "last_name": "Blogs"
        },
        {
          "id": 3,
          "first_name": "Jane",
          "last_name": "Doe"
        }
      ]
   },
    computed: {
        extendedUsers: function(){
            var users = this.users;
            for (var i in users)
                this.extendUser(users[i])

        },
        extendUser: function(user){
            user.fullName = function(){
                return user.first_name + " " + user.last_name;
            }
        }

    }

});



<tr v-for="user in users | orderBy user.fullName()">
      <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
          {{user.fullName()}} 
     </td>
<tr>
```
OriginalL'auteur Hans Yulian

-3

Faire une propriété calculée pour quelque chose comme ceci est un peu exagéré.

<tr v-for="user in users | orderBy fullName(user)">
      <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
          {{user.first_name + ' ' + user.last_name}} 
     </td>
<tr>

OriginalL'auteur notANerdDev

Vous devez vous connecter pour publier un commentaire.