Comment puis-je en exécuter une partie dans vue.js 2?

Question

Mon composant vue (second composant) comme ceci:

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

Si le code exécuté, les données affichées ne correspond pas à

Si je console.log (ce [ 'getListByPrice']), il y a 5 données. Mais montré dans les boucles de plus de 5 données

Si je supprime le code:

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

Le résultat est correct

Pourquoi si je l'appelle priceMin et priceMax par calculé, le résultat affiché ne correspond pas à ?

Answer 1

Je pense que vous n'avez pas besoin:

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

Il suffit d'utiliser les articles en ... mapGetters directement dans vos balises de moustache. De plus, utilisez le plugin chrome de vue pour examiner votre magasin vuex.

Vous avez posté votre magasin vuex afin que ce commentaire résout cela. Votre magasin est incorrect. le prix devrait être dans votre magasin, pas priceMax et priceMin. Ce sont des mutations de l'état. S'il vous plaît lire à travers les documents vuex.