Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
137 views
in Technique[技术] by (71.8m points)

App.vue props传值不成功

问题描述

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

路由配置有 props: true 吗?

http://jsrun.net/QAvKp/edit


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...