Vue.js berechnete Eigenschaft funktioniert nicht

Question

Ich habe ein Benutzerdatenobjekt, das einen first_name und last_name und eine berechnete Eigenschaft hat, die den vollständigen Namen zurückgibt, aber das folgende scheint nicht in meiner v-for-Direktive zu arbeiten?

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> 

Answer 1

Berechnete Eigenschaften unterstützen die Verschachtelung nicht.

Proof und einige Abhilfen/alternative Lösungen: https://github.com/vuejs/vue/issues/66

Answer 2

eine berechnete Eigenschaft für so etwas zu machen ist ein wenig übertrieben.

<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> 

Answer 3

Ich glaube nicht, dass eine berechnete Eigenschaft in Vue.js ein Argument akzeptieren können, werden sie soll in der Lage sein, sich ohne zusätzliche Interaktion zu bauen. Ich glaube, dass Ihr Fehler darin bestand, dass Sie eine Methode geschrieben und dann versucht haben, eine berechnete Eigenschaft zu registrieren.

So sollte es eine einfache Lösung sein, nur die Registrierung Ihrer Funktion von zu methods zu ändern, die es wirklich ist.

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

    } 

Auf diese Weise müssen Sie Ihren anderen Code nicht ändern.

Answer 4

Versuchen Sie, den Cache für die berechnete Eigenschaft zu deaktivieren, wie in https://github.com/vuejs/vue/issues/1189 erwähnt. Auf diese Weise wird der berechnete Wert immer neu berechnet.

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

Answer 5

Sie können die Benutzer in der berechneten Eigenschaft und Verwendung der Karte, die Array wie folgt abgebildet:

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

Dann in Sicht können Sie so etwas wie:

<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> 

Und ich bin Verwenden Sie es6 Pfeilfunktion. Wenn Sie wollen Funktion Pfeil nicht verwenden, dann können Sie so etwas wie:

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

Answer 6

ich einen ähnlichen Fall hatte, wenn ich eine Requisiten-Eigenschaft mit undecleared verschachtelten Eigenschaften verwenden. Aus irgendeinem Grund habe ich diese Arbeit ein auch

console.log(user.first_name)

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

tun, habe ich diese Arbeit mit Lambda-Ausdruck https://stackoverflow.com/a/46234335/726751

computed: { 
    fullName: _this => { 
     return _this.user.first_name + ' ' + _this.user.last_name; 
    } 
}