Неверное вычисляемое свойство Vue.js

У меня есть объект данных пользователей, который имеет имя first_name и last_name и вычисленное свойство, которое возвращает полное имя, но следующее, похоже, не работает в моей директиве 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>

Ответ 1

Я не считаю, что вычисленное свойство в Vue.js может принимать аргумент, они должны иметь возможность строить себя без дополнительного взаимодействия. Я считаю, что ваша вина в том, что вы написали метод, а затем попытались зарегистрировать его как вычисленное свойство.

Итак, это простое решение просто изменить регистрацию вашей функции от computed до methods, которой она действительно является.

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

    }

Таким образом вам не придется менять какой-либо другой код.

Ответ 2

Попробуйте отключить кеш для вычисленного свойства, как указано в https://github.com/vuejs/vue/issues/1189. При этом вычисленное значение будет всегда пересчитываться.

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

Ответ 3

Вычислимые свойства не поддерживают такое вложение.

Доказательство и некоторые обходные пути/альтернативные решения: https://github.com/vuejs/vue/issues/66

Ответ 4

Вы можете сопоставить пользователей в вычисленном свойстве и использовать этот сопоставленный массив следующим образом:

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

Тогда вы можете сделать что-то вроде:

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

И я использую функцию стрелки es6. Если вы не хотите использовать функцию стрелки, вы можете сделать что-то вроде:

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

Ответ 5

У меня был аналогичный случай, когда я использую свойство реквизита с неразделенными вложенными свойствами. По какой-то причине я сделал эту работу, сделав

console.log(user.first_name)

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

Кроме того, я сделал эту работу, используя выражение лямбда fooobar.com/questions/715624/...

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

Ответ 6

У меня есть похожий вопрос: как динамически создавать вычисления в Vue.js под динамически загружаемыми данными.

Но, в конце, вот возможное решение для вас из заключения, которое я получаю после обсуждения и проб и ошибок. Есть несколько способов:

создать расширитель, который назначит вычисляемый внутри каждого элемента, а затем вызвать его с помощью item.computedProperty() в пользовательском интерфейсе (с двойной скобкой)
предположим, что данные загружены, например items, создайте наблюдатель, который назначит вычисляемый каждому элементу, а затем поместите его в extendedItems. вычисляемая функция станет реактивной при привязке к пользовательскому интерфейсу, поэтому пользовательский интерфейс будет использовать extendedItems items вместо items
используйте vue this.$set чтобы вручную установить и включить реактивность для вычисленных значений.

Это с помощью вычисляется с функцией из решения № 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>

Ответ 7

Другая причина: свойства с префиксом подчеркивания (_) не будут инициировать computed.

Сюрприз: префиксы _ и $ зарезервированы в Vue.

Ответ 8

Создание вычислимого свойства для чего-то вроде этого немного перебор.

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