vue.js 2에서 계산 된 결과는 어떻게 표시합니까?

Question

내 VUE 성분이 같은 (제 성분) :

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

코드가 실행되는 경우, I (이 [ 'getListByPrice를']) CONSOLE.LOG 경우

일치하지 않는 도시 된 데이터가 존재 5 데이터. 내가 코드를 제거하면 그러나 5 개 이상의 데이터

을의 루프에 표시 :

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

결과는 올바른

내가 계산에 의해 priceMin 및 priceMax를 호출하는 경우, 같은 결과가 일치하지 않는 이유는 ?

Answer 1

나는 당신이 필요로하지 않는 것이 생각 :

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

그냥의 항목을 사용하여 ... mapGetters을 직접 콧수염 태그에. 또한 vue의 크롬 플러그인을 사용하여 vuex 상점을 검사하십시오.

귀하의 vuex 스토어를 게시 했으므로이 코멘트가 해당 주소로 전달됩니다. 상점이 잘못되었습니다. 가격은 priceMax 및 priceMin이 아닌 상점에 있어야합니다. 그것들은 국가의 돌연변이들입니다. vuex 문서를 읽어보십시오.