Question

我在刀片模板中有一个表格。如果我提交了我想将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实例？

Answer 1

要将数据传递到组件，可以使用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>

Answer 2

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

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

将可变形式的刀片模板传递给Vue组件

2 个答案: