从组件发送的 Vue prop 是未定义的

Question

我的仪表板内有一个看板，用于显示项目的问题。我添加了一个菜单，允许用户按项目过滤看板，这样一次只能看到一个项目的问题。默认视图是所有项目的问题。
在我的 Dashboard 组件中，我使用 axios（可以正常工作）从服务器获取所有项目的列表。
当用户选择一个项目时，我向看板组件发送一个项目 ID 道具，以便我可以从服务器获取该项目的问题。
但是，我从仪表板发送的道具不知何故未定义，我无法弄清楚为什么

Dashboard.vue

<template>
  <v-container>
    <v-row class="my-1">
      <v-col cols="3">
        <h2 style="font-size:40px;color:rgb(92, 92, 92)">Kanban Board</h2>
      </v-col>
      <v-col cols="7"></v-col>
      <v-col cols="2">
        <v-menu offset-y>
          <template v-slot:activator="{ on, attrs }">
            <v-btn color="primary" dark v-bind="attrs" v-on="on">
              View
            </v-btn>
          </template>
          <v-list>
            <v-list-item v-for="(project, index) in ProjectList" :key="index">
              <v-list-item-title @click="changeView(project.id)">{{ project.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-col>
    </v-row>
    <v-row>
      <KanBanBoard :projectid="project_id"></KanBanBoard>
    </v-row>
  </v-container>
</template>

<script>
import KanBanBoard from './KanBanBoard.vue'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: {
    KanBanBoard,
  },

  data() {
    return {
      project_id: '',
    }
  },

  computed: {
    ...mapGetters(['ProjectList']),
  },

  methods: {
    ...mapActions(['getProjectList']),

    changeView(project_id) {
      this.project_id = project_id
      
    },
  },

  created() {
    this.getProjectList()
  },
}
</script>

<style scoped>
.view {
  font-size: 20px;
}
</style>

NavBar.js（Dashboard 用来获取项目列表的 Vuex 文件）

import axios from 'axios'

const state = {
  Projects: [],
  ProjectsIssuesList: []
}

const getters = {
  ProjectList: (state) => state.Projects,
  ProjectIssuesList: (state) => state.ProjectsIssuesList
}

const actions = {
  async getProjectList({ commit }) {

    var projectList = []
    var issuesList = []
    await axios
        .get('https://fadiserver.herokuapp.com/api/v1/my-projects/')
        .then(response => {
          projectList = response.data

          for (let i = 0; i < projectList.length; i++) {
            let projectid = projectList[i].id
            
            axios
              .get('https://fadiserver.herokuapp.com/api/v1/my-issues-titles/?projectid=' + projectid)
              .then(response => {
                issuesList.push(response.data)
              })
              .catch(error => {
                console.log(error)
              })
          }
        })
        .catch(error => {
          console.log(error)
        })

    commit('setProjects', projectList),
    commit('setProjectsIssues', issuesList)
  },
}

const mutations = {
  setProjects: (state, Projects) => (state.Projects = Projects),
  setProjectsIssues: (state, ProjectsIssuesList) => (state.ProjectsIssuesList = ProjectsIssuesList)
}

export default {
  state,
  getters,
  actions,
  mutations
}

KanBanBoard.vue

<template>
  <v-container>
    <v-row wrap>
      <v-col xl="4" lg="4" md="4" sm="4" xs="12">
        <v-card>
          <v-card-title class="blue lighten-3">
            <span class="white--text">Open</span>
          </v-card-title>
          <v-divider horizontal></v-divider>
          <v-card-text class="blue lighten-3">
            <draggable class="list-group kanban-column" :list="Open" group="tasks">
              <v-card
                class="#f4f5fa"
                style="height:auto; margin-top:10px"
                v-for="issue in Open"
                :key="issue"
                align-center
                elevation="3"
              >
                <v-card-text>
                  <v-row dense style="width:auto">
                    <router-link
                      class="d-flex align-center text-decoration-none grey--text"
                      style="font-size:18px;"
                      :to="{ name: 'IssuePage', params: { id: issue.id, issue } }"
                    >
                      {{ issue.title }}
                    </router-link>
                  </v-row>

                  <v-row dense>
                    <v-col>
                      <v-chip
                        class="ma-2"
                        color="red"
                        outlined
                        style="position:relative; right:10px;top:10px; height:min-content"
                      >
                        {{ issue.issueSeverity }}
                      </v-chip>
                    </v-col>
                    <v-col>
                      <v-chip
                        class="ma-2"
                        color="green"
                        outlined
                        style="position:relative; right:83px; top:10px;height:min-content"
                      >
                        {{ issue.issueType }}
                      </v-chip>
                    </v-col>
                  </v-row>
                </v-card-text>
              </v-card>
            </draggable>
          </v-card-text>
        </v-card>
      </v-col>

      <v-col xl="4" lg="4" md="4" sm="4" xs="12">
        <v-card>
          <v-card-title class="light-green lighten-3">
            <span class="white--text">In Progress</span>
          </v-card-title>
          <v-divider horizontal></v-divider>
          <v-card-text class="light-green lighten-3">
            <draggable class="list-group kanban-column" :list="InProgress" group="tasks">
              <v-card
                class="#f4f5fa"
                style="height:auto; margin-top:10px"
                v-for="issue in InProgress"
                :key="issue"
                align-center
                elevation="3"
              >
                <v-card-text>
                  <v-row dense style="width:auto">
                    <router-link
                      class="d-flex align-center text-decoration-none grey--text"
                      style="font-size:18px;"
                      :to="{ name: 'IssuePage', params: { id: issue.id, issue } }"
                    >
                      {{ issue.title }}
                    </router-link>
                  </v-row>

                  <v-row>
                    <v-col>
                      <v-chip
                        class="ma-2"
                        color="red"
                        outlined
                        style="position:relative; right:10px;top:10px; height:min-content"
                      >
                        {{ issue.issueSeverity }}
                      </v-chip>
                    </v-col>

                    <v-col>
                      <v-chip
                        class="ma-2"
                        color="green"
                        outlined
                        style="position:relative; right:83px; top:10px;height:min-content"
                      >
                        {{ issue.issueType }}
                      </v-chip>
                    </v-col>
                  </v-row>
                </v-card-text>
              </v-card>
            </draggable>
          </v-card-text>
        </v-card>
      </v-col>

      <v-col xl="4" lg="4" md="4" sm="4" xs="12">
        <v-card>
          <v-card-title class="orange lighten-3">
            <span class="white--text">Completed</span>
          </v-card-title>
          <v-divider horizontal></v-divider>
          <v-card-text class="orange lighten-3">
            <draggable class="list-group kanban-column" :list="Completed" group="tasks">
              <v-card
                class="#f4f5fa"
                style="height:auto; margin-top:10px"
                v-for="issue in Completed"
                :key="issue"
                align-center
                elevation="3"
              >
                <v-card-text>
                  <v-row dense style="width:auto">
                    <router-link
                      class="d-flex align-center text-decoration-none grey--text"
                      style="font-size:18px;"
                      :to="{ name: 'IssuePage', params: { id: issue.id, issue } }"
                    >
                      {{ issue.title }}
                    </router-link>
                  </v-row>

                  <v-row dense>
                    <v-col>
                      <v-chip
                        class="ma-2"
                        color="red"
                        outlined
                        style="position:relative; right:10px;top:10px; height:min-content"
                      >
                        {{ issue.issueSeverity }}
                      </v-chip>
                    </v-col>
                    <v-col>
                      <v-chip
                        class="ma-2"
                        color="green"
                        outlined
                        style="position:relative; right:83px; top:10px;height:min-content"
                      >
                        {{ issue.issueType }}
                      </v-chip>
                    </v-col>
                  </v-row>
                </v-card-text>
              </v-card>
            </draggable>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import draggable from 'vuedraggable'
import { mapGetters, mapActions } from 'vuex'

export default {
  props: ['project_id'],

  components: {
    draggable,
  },

  computed: {
    ...mapGetters(['Open']),
    ...mapGetters(['InProgress']),
    ...mapGetters(['Completed']),
  },

  watch: {
    projectid() {
      this.fetchIssuesofProject(this.project_id)
      this.test()
    },
  },

  methods: {
    ...mapActions(['fetchIssuesofProject']),
    test() {
      console.log(this.projectid)
    },
  },

  created() {
    this.test(), this.fetchIssuesofProject(this.project_id)
  },
}
</script>

<style scoped>
hr {
  margin-top: 0.1px;
  margin-bottom: 0.1px;
  border: 1;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
</style>

Kanban.js

import axios from 'axios'

const state = {
    Issues: [],
}

const getters = {
    Open: (state) => state.Issues.filter(x => x.issueStatus == 'Open'),
    InProgress: (state) => state.Issues.filter(x => x.issueStatus == 'In Progress'),
    Completed: (state) => state.Issues.filter(x => x.issueStatus == 'Closed'),
} 

const actions = {
    

    async fetchIssuesofProject({ commit }, projectid) {
        const response = await axios.get('https://fadiserver.herokuapp.com/api/v1/my-issues-titles/?projectid=' + projectid).catch(error => {
            console.log("The error is here")
          })
        commit('setIssues', response.data)
    }
}

const mutations = {
    setIssues: (state, Issues) => (state.Issues = Issues)
}

export default {
    state,
    getters,
    actions,
    mutations
}```

Answer 1

可能是因为在 KanBanBoard.vue 中您将道具定义为 project_id 而在 Dashboard.vue 中您是这样传递的：

<KanBanBoard :projectid="project_id"></KanBanBoard>

改为：

<KanBanBoard :project_id="project_id"></KanBanBoard>

从组件发送的 Vue prop 是未定义的

Vue prop is sent from a component is undefined

javascript

vue.js

vuejs2

axios

vuex