3

是否可以从编译视图执行 javascript 代码？我需要在我的 index.blade 文件中编写一些 js 代码来处理一些事件。我尝试了 3 种方法，但它们都不起作用。

控制器。

 $advertisements = Advertisement::get();
  $view = View::make('test::admin/index',['advertisements'=> $advertisements]);
  $html = $view->render();
  return $html;

index.blade.php

@push('stackscript') // NOT WORKING
<script>
  alert();
</script>
@endpush

<script>    // NOT WORKING
  alert();
</script>

@section('footer_script')  // NOT WORKING
<script>
  alert();
</script>
@endsection
<div class="row">
  @foreach ($advertisements as $advertisement)
    <div class="col-md-9">
    <div>{{ $advertisement->title }}</div>
    <div>{{ $advertisement->body }}</div>
    <div><img src="{{asset($advertisement->image)}}"></div>
  </div>
  <div class="col-md-3">
  <form id="plugin-advertisement" method="POST"  action="{{route('plugin.delete-advertisement', $advertisement->id)}}">
    @csrf
    @method("DELETE")
      <button class="btn bnt-sm btn-outline-danger">delete</button>
    </form>
  </div>
    @endforeach
</div>

Vue 组件

window.axios.get(this.url)
    .then((res) => {
    this.pluginPanel = res.data;
});

template:
<div v-if="!loading" v-html="div(pluginPanel)" />
4

2 回答 2

0

您的所有三种方式都需要一个具有核心 HTML 的布局文件。

布局文件master.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <title>Test to render JavaScript</title>
    </head>
    <body>
        @stack('stackscript') //You render JavaScript - first way
        @yield('footer_script') //You render JavaScript - third way
    </body>
</html>

在index.blade.php中，您应该编写如下代码。

<!-- resources/views/layouts/app.blade.php -->
@extends('layouts.master')//You must have this line to extend layout.
@push('stackscript') //I hope this script will run
<script>
  alert();
</script>
@endpush

<script>    //I hope this script will run
  alert();
</script>

@section('footer_script')  //I hope this script will run
<script>
  alert();
</script>
@endsection
<div class="row">
  @foreach ($advertisements as $advertisement)
    <div class="col-md-9">
    <div>{{ $advertisement->title }}</div>
    <div>{{ $advertisement->body }}</div>
    <div><img src="{{asset($advertisement->image)}}"></div>
  </div>
  <div class="col-md-3">
  <form id="plugin-advertisement" method="POST"  action="{{route('plugin.delete-advertisement', $advertisement->id)}}">
    @csrf
    @method("DELETE")
      <button class="btn bnt-sm btn-outline-danger">delete</button>
    </form>
  </div>
    @endforeach
</div>
于 2021-08-04T14:57:31.000 回答
0

您必须在加载的 Vue 组件中使用 JavaScript，而不是在刀片文件中。请参见下面的代码：

如您所见，这个 Vue 组件中有一个脚本标签。在这里你可以编写你的 JavaScript 代码，当你将这个 Vue 组件渲染到你的刀片文件时，它将被使用。

<template>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <div class="title m-b-md">
                    Welcome to Vue.js on Laravel
                </div>
                <div class="links">
                    <a href="https://laravel.com/docs">View Laravel Docs</a>
                    <a href="https://vuejs.org/v2/guide/">View Vue Docs</a>
                    <a href="https://laracasts.com">Watch Videos</a>
                </div>
            </div>
        </div>
    </template>
    <script>
        export default {}
    </script>
    <style scoped>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Raleway', sans-serif;
            font-weight: 100;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links > a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }
    </style>

在您app.js现在将组件链接到刀片文件中的正确元素。这如下：

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('welcome', require('./components/Welcome.vue'));

const app = new Vue({
    el: '#app'
});

在你的index.blade.php

    <body>
        <div id="app">
            <welcome></welcome>
        </div>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
于 2020-08-15T09:28:18.337 回答