我可以在Vue.Js中傳遞計算屬性中的參數

是否可以在Vue.Js中的計算屬性中傳遞參數？我可以看到當getter/setter使用計算時，他們可以接受一個參數並將其分配給一個變量。喜歡這裏從documentation：我可以在Vue.Js中傳遞計算屬性中的參數

// ... 
computed: { 
    fullName: { 
    // getter 
    get: function() { 
     return this.firstName + ' ' + this.lastName 
    }, 
    // setter 
    set: function (newValue) { 
     var names = newValue.split(' ') 
     this.firstName = names[0] 
     this.lastName = names[names.length - 1] 
    } 
    } 
} 
// ...

這也是可能的：

// ... 
computed: { 
    fullName: function (salut) { 
     return salut + ' ' + this.firstName + ' ' + this.lastName  
    } 
} 
// ...

如果計算屬性採用參數，並返回所需的輸出。然而，當我嘗試這個，我得到這個錯誤：

vue.common.js:2250 Uncaught TypeError: fullName is not a function(…)

我應該使用這種情況下的方法嗎？

來源

2016-11-10 Saurabh

不，您不能將參數傳遞給計算屬性。是的，使用方法是最簡單的方法。 – nils

你應該使用方法：

<span>{{ fullName('Hi') }}</span> 

methods: { 
    fullName: function (salut) { 
     return salut + ' ' + this.firstName + ' ' + this.lastName  
    } 
}

附：計算出的屬性和方法之間的區別在於計算出的屬性被緩存，並且只有在它們的依賴關係發生變化時纔會更改 - 這就是爲什麼您無法在其中傳遞參數。每次你給他們打電話時都會評估方法。

來源

2016-11-11 00:47:22 damienix

改用''也可以。 – SalchiPapa

不知道它爲什麼被編輯...... – damienix

問題在於''，不再適用於Vue 2.0，而必須使用：'或' {{message}}'如此codepen所示：https://codepen.io/Ismael-VC/pen/dzGzJa – SalchiPapa

-1

我不完全確定你正在努力達到的目標，但是看起來你會用完全正確的方法代替計算！

來源

2016-11-10 08:40:19

您可以使用方法，但如果它們不是變異數據或沒有外部效果，我更願意使用計算屬性而不是方法。

您可以將參數傳遞給計算性能這樣（沒有記錄，而是通過維護建議，不記得在哪裏）：

computed: { 
    fullName: function() { 
     var vm = this; 
     return function (salut) { 
      return salut + ' ' + vm.firstName + ' ' + vm.lastName; 
     }; 
    } 
}

編輯：請不要使用此解決方案，它只是複雜的代碼，而不任何好處。

來源

2017-01-05 00:11:24 Unirgy

如果您可以提供參考，這將會非常有幫助。這應該工作。 – Saurabh

@saurabh對不起，這是一個在github中沒有真正描述性的問題的解決方案，我現在找不到它... – Unirgy

這對我很有用，但我不是粉絲的唯一的事實是它返回一個函數而不是實際的屬性，所以VueJS devtools不會在任何地方顯示結果。我不確定這是計算屬性的典型情況，但它使解決問題變得更加困難。 –

是的方法是使用參數。就像上面的回答一樣，在你的例子中，最好使用方法，因爲執行非常輕。

僅作參考，在一個情況下的方法很複雜，成本高，你可以緩存的結果，像這樣：

data() { 
    return { 
     fullNameCache:{} 
    }; 
} 

methods: { 
    fullName(salut) { 
     if (!this.fullNameCache[salut]) { 
      this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName; 
     } 
     return this.fullNameCache[salut]; 
    } 
}

注：使用此，WATCHOUT的內存，如果處理成千上萬

來源

2017-08-16 04:53:35 Isometriq

嗯，從技術上講，我們可以將一個參數傳遞給一個計算函數，就像我們可以將一個參數傳遞給vuex中的一個getter函數一樣。這樣的函數是一個返回函數的函數。

例如，在一家商店的干將：

{ 
    itemById: function(state) { 
    return (id) => state.itemPool[id]; 
    } 
}

此getter，可以映射到組件的計算功能：

computed: { 
    ...mapGetters([ 
    'ids', 
    'itemById' 
    ]) 
}

而且我們可以用這個計算功能我們模板如下：

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>

我們可以應用相同的方法來創建一個計算的方法od需要一個參數。

computed: { 
    ...mapGetters([ 
    'ids', 
    'itemById' 
    ]), 
    descriptionById: function() { 
    return (id) => this.itemById(id).description; 
    } 
}

而在我們的模板中使用它：

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>

這是說，我在這裏不是說這是與Vue公司做事的正確方法。

但是，我可以觀察到，當具有指定ID的項目在商店中發生變異時，視圖會自動使用此項目的新屬性刷新其內容（綁定似乎工作得很好）。

來源

2018-01-26 14:02:22

我可以在Vue.Js中傳遞計算屬性中的參數

回答

相關問題