App.vue props传值不成功

李海峰
  • 4
新手上路,请多包涵

问题描述

props传值不成功

问题出现的环境背景及自己尝试过哪些方法

新手,使用的是Vue Material Dashboard.
https://github.com/creativeti...

涉及的文件如下。

├── App.vue
├── components
│   ├── Tables
│   │   ├── OrderedTable.vue
│   │   └── SimpleTable.vue
├── pages
│   ├── Dashboard.vue
│   ├── Icons.vue
  1. 我在Dashboard.vue中使用了axios,用props向SimpleTable.vue和OrderedTable.vue传值成功。
  2. 但是每次我点击Dashboard时axios都会发送一次请求,这不是我希望的。
  3. 所以我把axios移到了App.vue,希望只在第一次加载页面时发送axios请求。尝试用props传值给pages/Dashboard.vue,但是传值始终不成功。

相关代码

App.vue template

<template>
  <router-view :results="results"></router-view>
</template>

App.vue script

<script>
import Dashboard from "@/pages/Dashboard.vue";
axios.defaults.withCredentials = true;

const url = "https://123456.com";

export default {
    data() {
    return {
      results: []
    };
  },
  components: {
    Dashboard
  },
  mounted() {
    axios
      .post(url, {
            method: "READ"
      })
      .then(response => {
        this.results = response.data
        console.log(this.results)
      });
  }
};
</script>

Dashboard.vue script

<script>
import { SimpleTable, OrderedTable } from "@/components";

export default {
  name: "Dashboard",
  props: ["results"],
    data: () => ({
    test: []
  }),
  components: {
    OrderedTable,
    SimpleTable
  },
    watch: {
    results: function(value) {
      this.test = value;
      console.log(this.test);
    }
  }
};
</script>
回复
阅读 954
1 个回答
✓ 已被采纳
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏