如何在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中运行一些计算？

回答

相关问题