web-dev-qa-db-fra.com

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

J'ai un objet de données utilisateurs qui a un prénom et un nom de famille ainsi qu'une propriété calculée qui renvoie le nom complet, mais ce qui suit ne semble pas fonctionner dans ma directive v-for?

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>
vue.jscomputed-properties
9
adam78

Je ne crois pas qu'une propriété calculée dans Vue.js puisse accepter un argument, elle est supposée être capable de se construire sans interaction supplémentaire. Je pense que votre faute est que vous avez écrit une méthode et que vous avez ensuite essayé de l'enregistrer comme une propriété calculée. 

Il devrait donc être simple de changer l'enregistrement de votre fonction de computed à methods, ce qui est le cas.

methods: {
       fullName: function (user) {
            return user.first_name + ' ' + user.last_name;
        }

    }

De cette façon, vous ne devrez changer aucun de vos autres codes.

16
Azeame

Essayez de désactiver le cache sur la propriété calculée, comme indiqué dans https://github.com/vuejs/vue/issues/1189 . Ce faisant, la valeur calculée sera toujours recalculée.

computed: {
  fullName: {
    cache: false,
    get() {
      return user.first_name + ' ' + user.last_name;
    }
  }
}
12
Fernanda Lemos

Les propriétés calculées ne prennent pas en charge l'imbrication de ce type.

Preuve et quelques solutions de contournement/solutions alternatives: https://github.com/vuejs/vue/issues/66

2
ceejayoz

Vous pouvez mapper les utilisateurs dans votre propriété calculée et utiliser ce tableau mappé comme suit:

computed: {
  fullName: function () {
    return this.users.map(
      item => item.first_name + ' ' + item.last_name
    );
  }
}

Alors en 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 j'utilise la fonction es6 arrow. Si vous ne voulez pas utiliser la fonction flèche, vous pouvez faire quelque chose comme:

return this.users.map(
  function(item) {return item.first_name + ' ' +item.last_name}
);
1
Mali Naeemi

J'ai une question similaire ici: Comment faire un calcul dinamique dans Vue.js, sous des données chargées dynamiquement .

Mais, au final, voici la solution possible pour vous à partir de la conclusion que j’obtiens après discussion et essais et erreurs. Il y a plusieurs façons:

  1. créer une extension qui affecte le calcul à l'intérieur de chaque élément, puis appelez-le à l'aide de item.computedProperty() dans l'interface utilisateur (avec un double crochet)
  2. supposons que les données sont chargées, par exemple items, créez un observateur qui affectera le calcul à chacun des éléments, puis placez-le dans extendedItems. la fonction calculée deviendra réactive lorsqu'elle sera liée à l'interface utilisateur; l'interface utilisateur utilisera alors extendedItems au lieu de items
  3. utilisez le this.$set de vue pour définir et activer manuellement la réactivité calculée.

Cette utilisation est calculée avec la fonction du numéro de solution 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>
0
Hans Yulian