Vuejs2 - 組件中的計算屬性

我有一個顯示名稱的組件。我需要計算每個名字的字母數量。我將nameLength作爲計算屬性添加，但vuejs不會在循環中確定此屬性。Vuejs2 - 組件中的計算屬性

var listing = Vue.extend({ 
    template: '#users-template', 
    data: function() { 
     return { 
      query: '', 
      list: [], 
      user: '', 
     } 
    }, 
    computed: { 
     computedList: function() { 
      var vm = this; 
      return this.list.filter(function (item) { 
       return item.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1 
      }) 
     }, 
     nameLength: function() { 
      return this.length; //calculate length of current item 
     } 
    }, 
    created: function() { 
     this.loadItems(); 
    }, 
    methods: { 
     loadItems: function() { 
      this.list = ['mike','arnold','tony'] 
     }, 
    } 
});

http://jsfiddle.net/apokjqxx/22/

所以結果預計

邁克 - 4

阿諾德6

託尼 - 4

來源

2016-11-03 maxxdev

似乎還有有關計算性能的一些誤解。我已經從你的小提琴創建了叉子，它會根據你的需要工作。

http://jsfiddle.net/6vhjq11v/5/

nameLength: function() { 
    return this.length; //calculate length of current item 
}

在評論它表明「計算當前項目的長度」但JS不能獲得當前項目的

this.length

這將在Vue的組件，但是其自身執行長的概念不是那個價值。

計算屬性對實例和返回值的其他屬性的工作。

但在這裏你沒有指定任何東西，並使用它，所以它不會使用任何屬性。

如果您需要更多信息請評論。

來源

2016-11-04 06:32:54

感謝Hardik，但你的jsfiddle例子不起作用。 – maxxdev

http://jsfiddle.net/6vhjq11v/5/試試這個對不起，忘記更新， –

謝謝，如果移動計算長度的方法，如預期的那樣工作正常。有趣的是，如果存在一種使用計算的方式。示例https://vuejs.org/guide/computed.html#Computed-vs-Watched-Property來計算FullName .... – maxxdev

Vuejs2 - 組件中的計算屬性

回答

相關問題