Discussion :

[Jean-Marc_Web]

Bonjour,

je développe une application sous Laravel 5.6 et Vuejs.

J'ai créé quelques composants Vue que j'ai intégré dans mon app.js. Je nomme ma div générale de mon application comme el de vue ( el :#app ) pour avoir mes composants accessibles partout dans mon application.

Seulement avec cette méthode je me retrouve avec des formulaire qui se referme automatiquement après leur ouverture. Les balises inputs codées a l'intérieur se retrouvent dehors et le "submit" n'a donc plus de destination.

Par exemple cela donne ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form method="post" action="/banUser"></form>
     <input type="text">
     <button type="submit">Envoyer</button>

Ce qui rend mes différents formulaires sur mon application non fonctionnels. Je ne comprend pas d'où viens ce problème/conflit, aucun message anormal dans ma console, ou dans mon plugin vue. En espérant trouver des éléments de réponse ici, merci.

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form.......></form>

Si tu fermes le formulaire AVANT les <input>... il ne faut pas t'étonner.


Mais comme tu ne montres pas le code que tu as écrit...

[Jean-Marc_Web]

Bonjour,

Mon code est écrit correctement, dans mon éditeur, je ferme mon formulaire à la fin.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form method=post action='/banUser'>
<input type="hidden" value='{{ $user->id }}'>
<button type="submit">Bannir</button>
</form>

Seulement sur mon navigateur, mon code HTML est transformé et certains de mes formulaires se ferment automatiquement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form ...></form>
<input...>
<button></button>

alors que le code source est correctement codé et que je n'appelle pas de composant sur les formulaires concernés.

Mon composant Vue est appelé de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form .....>
<div class="form-group"...>
< divers label et input >
</div>
.
.
.
<composant-vue-créé></composant-vue-créé>
.
.
.
</form>

Sur les formulaires où j’appelle le composant Vue, qui transforme le type d'un input de texte en 'password' et inversement, ceux-là (les formulaires) restent bien fonctionnels.

C'est comme-ci l'absence du composant crée dérangait le formulaire.

Je débute avec Vue, et pour le coup avec Laravel je dois intégrer Vue en tant que composant, et je manque encore beaucoup de compréhension des différentes mécaniques de ce framework, notamment avec son intégration dans Laravel.

Merci d'avoir pris le temps de me répondre :-)

[Invité]

1-

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="hidden" value='{{ $user->id }}'>

Sans attribut name ?

Et comme c'est une balise auto-fermante, il faut un / à la fin :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="hidden" name="id" value="{{ $user->id }}" />

Ca ne résoudra pas forcément le problème, mais ça me semble plus correct.

2- les navigateurs ferment parfois automatiquement les balises/structures HTML mal construites (ou considérées comme telle), mais pas forcément là où ça devrait.
C'est le cas d'un <div> dans un <p>.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p>p
 <div>div</div>
</p>

va être transformé en :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p>p</p>
<div>div</div>
<p></p>

Vérifie la structure HTML...

[Jean-Marc_Web]

Voici le code "complet" dans le sens où je l'avais grossièrement résumé plus haut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="/banUser">
           @csrf
         <input type="hidden" name="userId" value="{{ $utilisateur->id }}">
          <button type="submit" class="btn btn-dark">
                @if ($utilisateur->ban === 0)
                     Bannir
                @else
                    Débannir
                @endif
            </button>
     </form>

Le souci vient de vue (enfin il vient surtout de moi ^^) mais lorsque je ne déclare plus d'élément général en Vue mon formulaire fonctionne parfaitement c'est l'instance de vue qui me crée ces dysfonctionnement et j'aimerai comprendre pourquoi.

J'instancie une Vue générale de cette manière :

fichier app.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
Vue.component('general-map-view', require('./components/GeneralMapView.vue'))
 
Vue.component('password-input', require('./components/PasswordInput1.vue'));
 
const app = new Vue({
    el: 'app',
});

avec comme déclaration d'élément du DOM une div générale comprenant tout le body, voir le body lui même :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<body>
<div id="app">
 
            @include('partials\navbar')
 
            @include('flash::message')
 
            @yield('contenu')
 
        </div>
</body>

c'est dans ce cas là que j'ai mes erreurs sur des formulaires non concerné par mon élément input modifié

Vue.component('password-input', require('./components/PasswordInput1.vue'));

.

J'ai essayé de "sectoriser" mes "el" en en déclarant plusieurs, mais pour le coup ça me retourne des erreurs en console car des éléments Vue sont déclarés de manière générale mais ne sont pas encore créé par laravel.

erreur du style :

[Vue warn]: Cannot find element: #passwordinput1

car cet élément est appelé sur une autre page de l'appli ou sur une modal pas encore activée.

Aussi le problème de cette méthode (qui résout celui des formulaires transformés) c'est que je dois crée autant d'élément que d'instance de Vue, même avec un composant identique. Ce qui perd un peu de sa "flexibilité". De plus dans une vue j'ai deux formulaire qui appelle le même composant, et pour le coup la deuxième instance de l'objet ne se fait pas car je me retrouve avec deux ID identiques (problème d'importation d'un morceau de code commun au deux formulaires).


Désolé pour mes questions de débutants mais je cherche à comprendre comment tout cela s'articule, j'épluche la doc mais ça reste assez obscure pour moi.

[EDIT] : J'ai supprimé mes composants Input et je vais cantonner Vuejs à une partie plus délimité de mon application. J'aimerai tout de même comprendre mes erreurs mais je me rends bien compte que je ne peux pas manipuler ce framework si facilement. Aussi je remarque que la cohabition de Vue et jQuery se place plutot mal. Ce qui me fait dire ça c'est que j'ai un modal appelé depuis un template en Vue, et pour le coup l'appel devient inopérant.