Question

这在VUE.JS中是一个愚蠢的任务...但是我很想念它。

我有一个具有以下内容的子父项：

<teamPlayers :teamId="team.id_team"></teamPlayers>

值 teamId 发送到子组件，并且可以正常工作：我可以在子模板<h2>{{teamId}}</h2>中正确看到该值。

但是在同一个子组件中，使用this.teamId在方法内部却出现了 undefined 。

这里是整个子代码：

export default {
    props: ['teamId'],
    methods: {
        getJokess: function () {
            console.log(this.teamId);
        },
    },

    created() {
        this.getJokess();
    }
}

控制台应该返回正确的值，但它返回 undefined ，而不是完美呈现{{teamId}}。

Answer 1

我能想到的就是teams函数中可能未声明data()。如果不是，它将是无反应的。考虑下面的示例：

const teamPlayers = {
  props: ["teamId"],
  methods: {
    getJokess() {
      console.log(this.teamId);
    }
  },
  created() {
    this.getJokess();
  },
  template: "<h2>{{teamId}}</h2>"
};

const app = new Vue({
  el: "#app",
  components: {
    "team-players": teamPlayers
  },
  data() {
    return {
      teams: []
    };
  },
  mounted() {
    setTimeout(() => {
      this.teams = [{
          id_team: "fizz"
        },
        {
          id_team: "buzz"
        },
        {
          id_team: "foo"
        },
        {
          id_team: "bar"
        }
      ]
    }, 1000);

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="team of teams">
    <team-players :team-id="team"></team-players>
  </div>
</div>

我需要新鲜的眼睛来修复VUE道具不起作用

1 个答案: