如何在vue.js 2中運行一些計算？

-1

<template> 
    <div class="row"> 
     <div v-for="item in options"> 
      <div class="panel panel-default panel-product"> 
       .... 
      </div> 
     </div> 
     <div> 
      <a href="#" class="panel-more"> 
       <span>{{priceMin}} test {{priceMax}}</span> 
      </a> 
     </div> 
    </div> 
</template> 

<script> 
    ... 
    export default { 
     ... 
     computed: { 
      ...mapGetters([ 
       'getListByPrice', 'getPriceMin', 'getPriceMax' 
      ]), 
      options() { 
       return this['getListByPrice'] 
      }, 
      priceMin() { 
       return this['getPriceMin'] 
      }, 
      priceMax() { 
       return this['getPriceMax'] 
      }, 
     }, 
     ... 
    } 
</script>

如果代碼執行時，示出不匹配

如果我CONSOLE.LOG（此[ 'getListByPrice']）的數據，有5數據。但是，在超過5個數據

的循環中。如果我刪除代碼：

<span>{{priceMin}} test {{priceMax}}</span>

的結果是正確的

爲什麼如果我叫priceMin和priceMax通過計算，顯示的結果不匹配？

來源

2017-10-12 Success Man

你什麼時候使用'console.log'？ – imcvampire

你爲什麼要包裹Vuex吸氣劑？你可以使用'getListByPrice'等代替'options'，甚至可以將getter重映射到另一個名字，例如'mapGetters（{options：'getListByPrice'，...}）' – Phil

我認爲你並不需要：

 options() { 
      return this['getListByPrice'] 
     }, 
     priceMin() { 
      return this['getPriceMin'] 
     }, 
     priceMax() { 
      return this['getPriceMax'] 
     },

就直接在你的鬍子標籤使用的項目在... mapGetters。另外，使用vue的chrome插件來檢查你的vuex商店。

你發佈了你的vuex商店，所以這個評論解決了這個問題。您的商店不正確。價格應該在你的店裏，而不是priceMax和priceMin。那些是國家的突變。請通讀vuex文檔。

來源

2017-10-13 00:05:26 derFBeste

如何在vue.js 2中運行一些計算？

回答

相關問題