将可变表单刀片模板传递给vue组件

Posted 2023-02-22

【中文标题】将可变表单刀片模板传递给vue组件

【英文标题】：Passing variable form blade template to vue component

【发布时间】：2019-04-18 22:24:39

【问题描述】：

我在刀片模板中有一个表单。如果我提交表单，我想将 id 变量传递给 vue 组件。我该怎么做。请帮忙。在我的代码下方。

<table>
@foreach($zam as $z)
<tr>
    <td>$z->id</td>
    <td>$z->name</td>
    <td>$z->status</td>
    <td>$z->getUser->name</td>
    <td>
        <form method="POST" action="route('mod_zam')">
            @csrf
            <select name="status">
                <option value="przyjete"> przyjete</option>
                <option value="realizowane"> realizowane</option>
                <option value="wyslane"> wyslane</option>
            </select>
            <input type="hidden" name="id" value="$z->id" />
            <input type="submit" name="modyf" />
        </form>
    </td>
</tr>
@endforeach
</table>



 <ex id=???></ex>

我正在考虑在我的刀片中这样做：

const app = new Vue(
el: '#app',
data: 

 ,
 );

但它在刀片中不起作用。我的第二个问题 - 是否可以直接在刀片中创建 vue 实例，而不是通过组件？

【参考方案1】：

您可以直接在刀片视图中制作内联模板。

<component :props=" $props " inline-template>....</component>

【参考方案2】：

要将数据传递给您的组件，您可以使用props。

你可以这样做：

<component is="component" :zID=" $z->id "></component>

然后在您的Example.vue 文件中，您必须定义您的prop。然后你可以通过this.zID访问它。

<script>
  export default 
  props: ['zId'],
  mounted () 
    // Do something useful with the data in the template
    console.dir(this.zId);
    
  
</script>

【讨论】：

谢谢回答。我知道流行音乐。在我的刀片中，我以管理员身份循环订单。当我提交表格时，我可以更改订单状态。我不需要登录用户的 id。 $z->getUser->name 是订单所有者的名称。 $z->id 是订单的id。我的问题是当我更改订单状态时如何将所选订单的 ID 发送到前端（前组件）。

用户 ID 是您需要更改 ID 订单的一个参考

对不起，我不明白。