Question

我还是vue.js的新手，感谢任何帮助。我正在尝试创建一个数据属性对象，该对象获取我正在构建的赌场的特定游戏的游戏ID。我在元素中指定了游戏ID，但是，在加载页面时，我在Google Chrome devtools中遇到了Cannot read property 'gameid' of undefined。我不明白为什么元素不接受游戏ID。我在Laravel的<game gameid={{$gameid}}中指定了游戏ID，但这并没有显示出来。我仍然遇到这个错误。我做错了什么？

play.blade.php

@extends('layouts.app')

@section('content')

<div class="container">
    <game gameid="{{$gameid}}"></game>
</div>

<template id="game-template">

</template>


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

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

<script src="../js/play.js"></script>

@endsection

play.js

Vue.component('game', {
  template: '#game-template',

  data() {
    ready: null;
  },

  props: ['gameid'],

  created: function() {
    this.$http.get('api/ready/games/'.this.gameid).then(function(response) {
      console.log(response);
    });
  },
});

new Vue({
    el: 'body'
});

非常感谢任何帮助！

Answer 1

我猜你已经缩短了你的代码，所以我只能按照你所写的内容去做：

首先不要挂载到body，只需创建div id并安装到其中，其次data需要return组件内的对象：

data(){
   return {
      ready: null;
   }
}

您还使用php语法（点）连接而不是加号，因此它应该是：

'api/ready/games/' + this.gameid

如果gameid是一个数字，您应该使用v-bind传递它：

<game v-bind:gameid="{{$gameid}}"></game>

希望，这会让你在某种程度上解决你的问题，这里有一个似乎运作正常的JSFiddle：

https://jsfiddle.net/3h033p5q/

Vue.js - 无法阅读财产＆＃39; gameid＆＃39;未定义的

1 个答案: