两个选择动力学Vue laravel

我想用vue加载2 select,我有国家(地区),城市州,但是我不想从resources / app.js调用js,因为我仅在特定情况下不需要所有页面中的js。我是vue的新手。当我从resources / app.js加载它(如果仅适用于状态而不适用于城市)以及在其他页面中加载时,由于找不到该对象,因此抛出错误。

我不想在这里打电话给他


require('./bootstrap');

window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

//require('./estado');
//require('./ciudad');

所以我该如何拨打电话以及将js文件放在哪里

文件获取状态资源/js/estado.js


const app = new Vue({
    el: '#app',
    data: {
        selected_pais: '',
        selected_estado: '',
        selected_ciudad: '',
        estados: [],
        ciudades: [],
    },

    mounted(){

        document.getElementById('estado').disabled = true;
        this.selected_pais = document.getElementById('pais').getAttribute('data-old');

        if(this.selected_pais !='')
        {
            this.loadEstados();
        }

        this.selected_estado = document.getElementById('estado').getAttribute('data-old');



        document.getElementById('ciudad').disabled = true;
        this.selected_estado = document.getElementById('estado').getAttribute('data-old');


        if(this.selected_estado !='')
        {
            this.cargarCiudades();
        }

        this.selected_ciudad = document.getElementById('ciudad').getAttribute('data-old');




    },

     methods: {
        loadEstados() {

            this.selected_estado ='';
            document.getElementById('estado').disabled =true;

            if (this.selected_pais !="") {
                axios.get(`http://127.0.0.1:80/estados/pais`, {params: {pais_id: this.selected_pais} }).then((response) => {
                this.estados = response.data;
                document.getElementById('estado').disabled =false;

                });
            }

        },



        cargarCiudades() {

            this.selected_ciudad ='';
            document.getElementById('ciudad').disabled =true;

            if (this.selected_estado !="") {
                axios.get(`http://127.0.0.1:80/ciudades/estado`, {params: {estado_id: this.selected_estado} }).then((response) => {
                this.ciudades = response.data;
                document.getElementById('ciudad').disabled =false;

                });
            }

        },


    }


});


文件获取城市资源/js/ciudades.js

const app = new Vue({
    el: '#app',
    data: {
        selected_estado: '',
        selected_ciudad: '',
        ciudades: [],
    },

    mounted(){

        document.getElementById('ciudad').disabled = true;
        this.selected_estado = document.getElementById('estado').getAttribute('data-old');


        if(this.selected_estado !='')
        {
            this.cargarCiudades();
        }

        this.selected_ciudad2 = document.getElementById('ciudad').getAttribute('data-old');

    },

     method: {
        cargarCiudades() {

            this.selected_ciudad2 ='';
            document.getElementById('ciudad').disabled =true;

            if (this.selected_estado !="") {
                axios.get(`http://127.0.0.1:80/ciudades/estado`, {params: {estado_id: this.selected_estado} }).then((response) => {
                this.ciudades = response.data;
                document.getElementById('ciudad').disabled =false;

                });
            }

        }
    }


});

文件视图

@extends('layouts.app')

@section('content')

@inject('paises','App\Services\Paises')
<div class="container">

<div class="row">
<div class="col-md-8">
   @if ($errors->any())
   <div class="alert alert-danger">
     <h4>Por Favor corriga los siguientes errores   </h4>
       <ul>
           @foreach ($errors->all() as $error)
               <li>{{ $error }}</li>
           @endforeach
       </ul>
   </div>
  @endif

<form action="/usuarios" method="POST">
@csrf
 <div class="form-row">
   <div class="form-group col-md-6">
     <label for="inputEmail4">Nombre</label>
     <input type="text" class="form-control" name="nombre" id="inputEmail4" placeholder="Nombre" value="{{old('nombre')}}">
   </div>
   <div class="form-group col-md-6">
     <label for="inputPassword4">Email</label>
     <input type="text" class="form-control" name="email" id="inputPassword4" placeholder="Email" value="{{old('email')}}">
   </div>
 </div>

 <div class="form-group">
   <label for="inputAddress">Direccion</label>
   <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" name="direccion" value="{{old('direccion')}}">
 </div>


 <div class="form-row">
   <div class="form-group col-md-4" id="div_pais">
     <label for="inputCity">Pais</label>
     <select v-model="selected_pais" id="pais" data-old="{{old('cbo_pais')}}"
      v-on:change="loadEstados()"   name="cbo_pais"  class="form-control">
       @foreach ($paises->get() as $index => $pais)
         <option value="{{$index}}" >{{$pais}}</option>
       @endforeach
     </select>


   </div>


   <div class="form-group col-md-4">
     <label for="inputCity">Estado</label>

      <select v-model="selected_estado" id="estado" data-old="{{old('cbo_estado')}}"  
      v-on:change="cargarCiudades()" name="cbo_estado" class="form-control" >
       <option value="">Selecione un Estado</option>

       <option v-for="(estado, index) in estados" v-bind:value="index">@{{estado}}</option>
       </select>

   </div>

   <div class="form-group col-md-4">
     <label for="inputState">Ciudad</label>
     <select v-model="selected_ciudad" id="ciudad" data-old="{{old('cbo_ciudad')}}"  
      name="cbo_ciudad" class="form-control" >

      <option value="">Selecione un Ciudad</option>
       <option v-for="(ciudad, index) in ciudades" v-bind:value="index">@{{ciudad}}</option>
     </select>
   </div>
 </div>


  <div class="form-group">
   <label for="inputZip">Zip</label>
     <input type="text" class="form-control" id="inputZip" name="zip">
   </div>





 <div class="form-group">
   <div class="form-check">
     <input class="form-check-input" type="checkbox" id="gridCheck">
     <label class="form-check-label" for="gridCheck">
       Check me out
     </label>
   </div>
 </div>


 <button type="submit" class="btn btn-primary">Registrar</button>
 <button type="reset" class="btn btn-danger">Cancelar</button>

</form>
</div>
</div>
</div>
@endsection
@section('scripts')


@endsection

如何在视图中调用文件?

评论