Question

沃萨普族，

我正在用longpolling构建一个Scrum扑克，为此我想使用vue。我以前已经使用过常规的.blade模板。

我有可点击的div，它像这样更新了某人对点击的卡片估算：

<form action="{{route('sessions.values', $currentRoom->id)}}" id="1" method="post">
        @csrf
        @method('PUT')
        <input type="number" value="1" name="userValue" hidden />
        <img src="https://image.flaticon.com/icons/svg/188/188234.svg" height="50" width="50" />
      </form>

现在，我想编写一个在整个房间中都可以容纳的vue模板模板，包括所有参与的用户名，值等，并可以选择更新其点击估算值。

我的Vue当前看起来像这样：

<template>
  <div>
    <span class="badge badge-pill badge-primary">ID: {{roomNumber}}</span>
    <span class="badge badge-pill badge-secondary">Raumname: {{roomName}}</span>

    <div class="alert alert-danger" role="alert" v-for="(user,index) in currentUsers" :key="index">
      <!-- Show Json Debug is User is Admin -->
      <div v-if="user.isAdmin == 1">
        <div class="alert alert-primary" role="alert">{{output}}</div>
      </div>

      <!-- Show User Attributes for each user in room -->
      <div class="alert alert-warning" role="alert">{{user.name}}</div>

      <div class="alert alert-info" role="alert" v-if="user.isAdmin == 1">Admin!</div>
      <div class="alert alert-info" role="alert" v-if="user.isAdmin !== 1">No Admin!</div>

      <div class="alert alert-light" role="alert">{{user.pivot.userValue}}</div>
    </div>

    <div
      class="flex-left"
      onclick="document.getElementById('1').submit();"
      style="cursor: pointer;"
    >
      <form action="{{route('sessions.values', $currentRoom->id)}}" id="1" method="post">
        @csrf
        @method('PUT')
        <input type="number" value="1" name="userValue" hidden />
        <img src="https://image.flaticon.com/icons/svg/188/188234.svg" height="50" width="50" />
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      output: "",
      roomNumber: "",
      roomName: "",
      currentUsers: "",
      userValue: ""
    };
  },
  created() {
    axios
      .get("/public/api/getPlayerInfo/" + this.$route.params.currentRoom)
      .then(response => {
        this.output = response.data;

        this.roomNumber = response.data.currentRoom.id;
        this.roomName = response.data.currentRoom.roomName;

        this.currentUsers = response.data.currentUsers;
        this.userValue = response.data.currentUsers.name;

        console.log(this.currentUsers);
      })
      .catch(e => {
        console.log(e);
      });
  },
  methods: {
    getIDfromURL() {
      path = window.location.pathname;
      segments = path.split("/");
      return segments[2];
    },
    flash(message) {
      this.body = message;
      this.show = true;
      this.hide();
    },
    hide() {
      setTimeout(() => {
        this.show = false;
      }, 4000);
    }
  }
};
</script>
    <style>
.alert-flash {
  position: fixed;
  right: 25px;
  bottom: 25px;
}
</style>

cards.blade.php

<!-- Stored in resources/views/child.blade.php -->



@extends('layouts.app')


@section('title', 'Scrumpoker')




@section('content')

<card></card>




@endsection

开始获取房间信息时调用的功能

   public function getPlayerInfo($id)
    {
        $currentRoom = Session::findOrFail($id);
        $currentUsers = $currentRoom->users;


        $jsonData['currentRoom'] = $currentRoom;
        $jsonData['currentUsers'] = $currentUsers;



        return response()->json(['currentRoom' => $jsonData['currentRoom'], 'currentUsers' => $currentUsers]);
    }

我应该用onclick创建一个div，将值发送到控制器吗？如果是的话，这将是一种简便的方法吗？

Answer 1

您似乎在询问实现提交用户卡值的最佳方法吗？

我不确定为什么只有一张卡，但是要提交该卡的值，这是一个示例（我认为您不能在Vue中使用Blade指令）

https://vuejs.org/v2/api/#ref

https://vuejs.org/v2/guide/events.html#Listening-to-Events

https://vuejs.org/v2/guide/events.html#Event-Modifiers

<div
    class="flex-left"
    v-on:click="$refs.card_form.submit()"
    style="cursor: pointer;"
>
    <form
        v-on:submit.prevent="submitCard(1)"
        ref="card_form"
        method="post"
    >
        <img src="https://image.flaticon.com/icons/svg/188/188234.svg" height="50" width="50" />
    </form>
</div>

export default{
    methods:{
        submitCard(card_value){
            axios.post('/values',{ userValue:card_value }) //not sure what your endpoint is
            .then(response=>{
                window.alert('value submitted')
            })
        }
    }

}

将参数从Vue发送到Laravel控制器以更新道具

1 个答案: