列表未在 vue.js 中动态显示

Posted 2023-02-22

【中文标题】列表未在 vue.js 中动态显示

【英文标题】：List isn't dynamically displayed in vue.js

【发布时间】：2021-01-24 13:16:58

【问题描述】：

我是 vue.js 的新手，通过 vue doc、youtube 视频等自学。找了好久，看了youtube的教程，到现在还没有找到答案，希望大家能帮帮我。

所以这是我的问题，我正在构建一个 Web 应用程序，我需要动态显示一个对象列表，但它没有在我第一次加载该页面时显示。我必须去其他路线然后回来看它，所以我想我误解了一些生命周期或该专业领域的某些东西......

我正在使用 vuex 来存储和检索我的数据，如下所示：

import Vue from 'vue';

const state = 

    journees: ,
;

const getters = 

    getJourneeList(state) 
        return state.journees;
    
;

const mutations = 
   
    GET_LIST(state, journees) 
        state.journees = journees;
    
;

const actions = 

    getJourneesUser(commit) 
        Vue.axios.get('/journee/')
            .then( res => 
                commit('GET_LIST', res.data)
            )
            .catch((err) => console.log(err))
    
;



export default 
    state,
    getters,
    mutations,
    actions
;

然后我像这样在我的 vue 中得到它：

<template>
  <v-container>
      <v-card v-for="heure in heures" :key="heure._id">
        <v-card-title> heure </v-card-title>
      </v-card>
  </v-container>
</template>

<script>
export default 
  name: "TimeList",
  data() 
    return 
      heures: this.$store.getters.getJourneeList,
    
  ,
  created() 
    this.$store.dispatch('getJourneesUser');
  

</script>

【问题讨论】：

您可以检查两件事，首先尝试 console.log(heures) 并查看您在控制台中获得的数据类型。二、journees应该是数组类型而不是对象吗？

我已经将 console.log 放在了任何地方，它首先按预期进入了我的 created() 函数，然后在执行 mutator 之前安装了它。尽管为什么它在完成后不更新是我的大问题......关于对象/数组问题我不确定它是否真的很重要，因为我正在那个 state.journees à new object 应该删除最后一个, 或者我弄错了...我对使用 Promise 也很陌生，所以也许我以错误的方式做不止一件事...

【参考方案1】：

您需要使用 mapState 并在计算值中使用它，因为计算值将响应状态的变化。您不需要 getter，但如果您需要这里是带有 getter 的版本。如果你的 store 模块叫 journees，应该是这样的：

没有吸气剂

<template>
    <v-container>
        <v-card v-for="heure in journees" :key="heure._id">
            <v-card-title> heure </v-card-title>
        </v-card>
    </v-container>
</template>

<script>
import  mapState  from "vuex";
export default 
    name: "TimeList",
    computed: 
        ...mapState(["journees"])
    ,
    created() 
        this.$store.dispatch("getJourneesUser");
    ,
;
</script>

带吸气剂

<template>
    <v-container>
        <v-card v-for="heure in getJourneeList" :key="heure._id">
            <v-card-title> heure </v-card-title>
        </v-card>
    </v-container>
</template>

<script>
import  mapGetters  from "vuex";
export default 
    name: "TimeList",
    computed: 
        ...mapGetters(["getJourneeList"])
    ,
    created() 
        this.$store.dispatch("getJourneesUser");
    ,
;
</script>