一旦在 laravel 中触发事件，如何获取特定 div 中的值？

Question

我是 laravel 和 vue.js 的新手。 我正在使用资源从 API 获取数据。 这个想法是使用 2 div 的GOAL和VALUE 。

当通过 PUSHER.. 来自服务器的值发生变化时，应更新值，而不刷新页面。 这是我的代码

1. model

class Progress extends Model
{
 protected $fillable = [
        'id', 'name', 'goal', 'description'
    ];
    public $timestamps = false;

}

2. Controller

class ProgressController extends Controller
{
    public function index()
    {
      return ProgressResource::collection(Progress::paginate(4));
      event(new UpdatedValue());

}
}

3.资源.php

class ProgressResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return[
         'the_custom_id' => $this->id,
         'name' => $this->name,
         'goal' => $this->goal,
         'description' => $this->description,
         'value' => ProgressResource::mockData($this->goal),
  ];
    }

 public static function mockData($goal=1000)
    {
        // 0 to $goal takes 17 minutes
        $multiplier = ($goal + 7) / 1000;
        $count = substr(time(), -3);
        return intval(round($multiplier * $count, 0));
    }


}

4.活动

class UpdatedValue implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public  $value, $goal;


    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($value)
    {
      //$this->progress = ProgressResource::collection(Progress::paginate(4));
        $this->value  = ProgressResource::mockData($this->goal);

    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('progress');
    }

}

5.组件/Front.vue

<template>
 <div class="container">
    <h1> Progress </h1>
       <div  class= "progress"  v-for = "progressdata in progress" v-bind:id="progressdata.id">
              <div id="div1">{{ progressdata.goal }}</div>
              <div id="div2" class="value">{{ progressdata.value }}</div>
        </div>
</div>
</template>

<script>

  export default {
    data: function() {
            return {
              progress: [],
              
           }
        },
 mounted() {
       this.loadContents();
       this.listen();
 },

methods: {
    loadContents: function() {
           //load Api
           axios.get('/api/progress')
           .then((response) => {
                this.progress = response.data.data;
               
         })
         .catch(function (error) {
           console.log(error);
    });
  },
    listen(){
      Echo.channel('progress')
          .listen('UpdatedValue', (e) =>{
            this.value = e.value;

            console.log(this.value);
            //console.log(e);
    });
    }
}
}
</script>

6. BLade.php

 <div id ="app">
      <front-page ></front-page>
      </div>
      <script src = "{{ mix('js/app.js') }}"></script>

    </body>

一旦事件被触发，值应该在前端更新而不刷新页面。 我已经安装了PUSHER PACKAGES、PUSHER-JS 和 Laravel Echo THROUGH NPM 。我无法获得通过前端事件更新的值。有人可以帮助解决这个问题吗？

谢谢。

Answer 1

loadContents: function() {
       //load Api
       let self = this ; // we are storing VueComponent object here.Cause this wont work in callback it will be undefined.
       axios.get('/api/progress')
       .then((response) => {
            self.progress = response.data.data;
     })
     .catch(function (error) {
       console.log(error);
});

您没有在数据属性中定义值。 在那里定义值并使用自己的 object 来存储这个（对象）。

data: function() {
        return {
          progress: [],
          value:null,
          
       }
    },