Question

我想创建一个动态依赖下拉列表（当我在第一个选择中选择Chantier时，第二个选择将充满Chantier的饰物）

payer.blade.php

<div class="card-body">
  <div class="form-group">
    <label>Chantier:</label>
    <select class="form-control" v-model="chantier" @change="getOuvrage()">
      <option value="0">Select Country</option>
      <option v-for="data in chantiers" :value="data.id"
        >@{{ data.chantier }}</option
      >
    </select>
  </div>
  <div class="form-group">
    <label>Select State:</label>
    <select class="form-control" v-model="state">
      <option value="0">Select State</option>
      <option v-for="data in ouvrages" :value="data.id"
        >@{{ data.ouvrage }}</option
      >
    </select>
  </div>
</div>
<script src="{{ asset('js/Vue.js') }}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Vue-js代码

export default {
    mounted() {
        console.log('Component mounted.')
    },
    data(){
        return {
            chantier: 0,
            chantiers: [],
            ouvrage: 0,
            ouvrages: []
        }
    },
    methods:{
        getChantier: function(){
          axios.get('/api/getChantier')
          .then(function (response) {
             this.chantiers = response.data;
          }.bind(this));

        },
        getOuvrage: function() {
            axios.get('/api/getOuvrage',{
             params: {
               chantier_id: this.chantier
             }
          }).then(function(response){
                this.ouvrages = response.data;
            }.bind(this));
        }
    },
    created: function(){
        this.getChantier()
    }
}

SalarieController

public function getChantier()
{
    $data = Chantier::get();
    return response()->json($data);
}

public function getOuvrage(Request $request)
{
    $data = State::where('chantier_id', $request->chantier_id)->get();
    return response()->json($data);
}

Routes \ wep.php

Route::get('payer', function () {
    return view('salarie.payer');
});

Routes \ api.php

Route::get('getChantier', 'SalariesController@getChantier');
Route::get('getOuvrage', 'SalariesController@getOuvrage');

Answer 1

我不熟悉您尝试直接将其实现到刀片文件中的方式。但是我可以告诉您如何在Laravel中构建Vue组件，这可以帮助您克服收到的错误并清理刀片文件。

我还没有测试过，但这是作为Vue组件的代码：

/resources/js/components/PayerForm.vue

<template>
    <div class="card-body">
        <div class="form-group">
            <label>Chantier:</label>
            <select class="form-control" v-model="chantier" @change="getOuvrage()">
                <option value="0">Select Country</option>
                <option v-for="data in chantiers" :value="data.id"
                >{{ data.chantier }}</option
                >
            </select>
        </div>
        <div class="form-group">
            <label>Select State:</label>
            <select class="form-control" v-model="state">
                <option value="0">Select State</option>
                <option v-for="data in ouvrages" :value="data.id"
                >{{ data.ouvrage }}</option
                >
            </select>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'PayerForm',
        mounted() {
            console.log('Component mounted.')
        },
        data(){
            return {
                chantier: 0,
                chantiers: [],
                ouvrage: 0,
                ouvrages: []
            }
        },
        methods:{
            getChantier: function(){
                axios.get('/api/getChantier')
                    .then(function (response) {
                        this.chantiers = response.data;
                    }.bind(this));

            },
            getOuvrage: function() {
                axios.get('/api/getOuvrage',{
                    params: {
                        chantier_id: this.chantier
                    }
                }).then(function(response){
                    this.ouvrages = response.data;
                }.bind(this));
            }
        },
        created: function(){
            this.getChantier()
        }
    }
</script>

<style scoped>

</style>

此外，默认情况下，应该已经通过app.js文件导入的bootstrap.js文件将axios加载到Laravel中。这包括自动设置CSRF令牌，因此您无需为发布/放置/删除请求进行管理。您可以自己检查一下。

注册组件：

/resources/js/app.js


// this should include axios by default
require('./bootstrap');

// import the Vue library
import Vue from 'vue';
window.Vue = Vue;

// ... any other imports or declarations

// register your custom Vue component
Vue.component('payer-form', require('./components/PayerForm.vue').default);

// intialize your root component (some people use #app instead)
const root = new Vue({
    el: '#root',
});

您的刀片文件，假设它是父刀片文件中的@include()，扩展了加载必需的样式和脚本的布局，并假定该布局包含<div id="root">...</div>元素作为包装。最终，由于您只需将标签添加到父刀片文件中，就可能不再需要它自己的文件。

payer.blade.php

<payer-form></payer-form>

我希望这会有所帮助，祝你好运！

编辑： 哦，别忘了混合使用您的资产！进行更改时，npm run watch或npm run dev等。

导出声明只能出现在模块的顶层

1 个答案: