Composant Vue.js combiné à la validation de formulaire Laravel (c'est-à-dire en passant une valeur initiale pour les données) - laravel, vue.js, vue-component

Après avoir beaucoup cherché sur Google et trouvé le forum Vue.js, je suis prêt à abandonner.

Je crée un composant de recherche de code postal, ettout fonctionnait bien jusqu'à ce que j'essaye de le combiner avec la validation de formulaire de Laravel - en particulier lorsqu'il y a une erreur et que le formulaire remplit les anciennes valeurs.

J'espère que je couvre tout ici. J'ai une entrée de formulaire partielle que j'utilise qui génère chaque entrée de formulaire. Il utilise également Laravel "s old(...) valeur si présente.

Le problème est qu'il existe une valeur par défaut (dans ce cas pour le code postal et l'adresse) d'une chaîne vide, cela remplace l'attribut value de l'entrée Code postal et le contenu de la zone de texte Adresse.

En terre maquillée, l'idéal serait:

data : function() {
return {
postcode        : old("postcode"),
address         : old("address"),
addresses       : [],
hasResponse     : false,
selectedAddress : ""
};
},

C'est donc ce que j'essaye de reproduire.

Je peux probablement remplacer la validation par la validation Ajax, mais mon formulaire modifie légèrement l'apparence des champs avec une erreur, ce serait donc compliqué

De ma compréhension:

• Je ne peux pas définir une valeur de données initiale, car cela remplacera la valeur d'entrée.
• Je peux définir un accessoire, mais c'est immuable
• Toute aide que je peux trouver suggère "d'utiliser une propriété calculée qui détermine sa valeur à partir de l'accessoire" mais si vous le faites littéralement, elle ne se met pas à jour.

Voici ce que j'ai jusqu'ici:

<so-postcode-lookup initial-postcode="{{ old("postcode") }}" initial-address="{{ old("address") }}"></so-postcode-lookup>

---

/**
* Allow user to select an address from those found in the postcode database
*/
Vue.component("so-postcode-lookup", {
name     : "so-postcode-lookup",
template : "#so-postcode-lookup-template",
props    : ["initialPostcode", "initialAddress"],
data     : function() {
return {
postcode        : "",
address         : "",
addresses       : [],
hasResponse     : false,
selectedAddress : ""
};
},
computed : {
currentAddress : function() {
if (this.address !== "") {
return this.address;
} else {
return this.initialAddress;
}
},
currentPostcode : function() {
if (this.postcode !== "") {
return this.postcode;
} else {
return this.initialPostcode;
}
},
hasAddresses : function() {
return this.addresses.length;
},
isValidPostcode : function() {
return this.postcode !== "" && this.postcode.length > 4;
},
isInvalidPostcode : function() {
return !this.isValidPostcode;
}
},
methods : {
fetchAddresses : function() {
var resource = this.$resource(lang.ajax.apiPath + "/postcode-lookup{/postcode}");
var $vm      = this;
var element  = event.currentTarget;

// Fetch addresses from API
resource.get({ postcode : this.postcode }).then(function(response) {
response = response.body;

if (response.status == "success") {
// Update addresses property, allowing select to be displayed
$vm.addresses = response.data;
} else {
$vm.addresses = [];
}

this.hasResponse = true;
});
},
setAddress : function() {
this.address = this.selectedAddress;
}
}
});

---

<template id="so-postcode-lookup-template">
<div class="row">
@include("partials.input", [
"label"                  => trans("register.form.postcode"),
"sub_type"               => "postcode",
"input_id"               => "postcode",
"autocorrect"            => false,
"input_attributes"       => "v-model="currentPostcode"",
"suffix_button"          => true,
"suffix_button_reactive" => trans("register.form.postcode_button_reactive"),
"suffix_text"            => trans("register.form.postcode_button"),
"required"               => true,
"columns"                => "col-med-50",
"wrapper"                => "postcode-wrapper"
])

<div class="col-med-50 form__item" v-show="hasResponse">
<label for="address-selector" class="form__label" v-show="hasAddresses">{{ trans("forms.select_address") }}</label>
<select id="address-selector" class="form__select" v-show="hasAddresses" v-model="selectedAddress" @change="setAddress">
<template v-for="address in addresses">
<option :value="address.value">@{{ address.text }}</option>
</template>
</select>
<so-alert type="error" allow-close="false" v-show="!hasAddresses">{{ trans("forms.no_addresses") }}</so-alert>
</div>

@include("partials.input", [
"label"            => trans("register.form.address"),
"input_id"         => "address",
"type"             => "textarea",
"input_attributes" => "v-model="currentAddress"",
"required"         => true
])
</div>
</template>

Si j'essaie ceci et que je règle le modèle des entrées sur currentPostcode et currentAddress respectivement, il me semble obtenir une boucle infinie.

Je pense que je pense trop à cela d'une manière ou d'une autre.

Réponses:

1 pour la réponse № 1

Vous ne pouvez pas "t lier directement à un prop, mais vous pouvez définir une valeur initiale en utilisant le prop, puis lier à celui-ci, ce qui est la voie à suivre si vous avez besoin d'une liaison bidirectionnelle:

Vue.component("my-input", {
props: {
"init-postcode": {
default: ""
}
},
created() {
// copy postcode to data
this.postcode = this.initPostcode;
},
data() {
return {
postcode: ""
}
},
template: "<span><input type="text" v-model="postcode"> {{ postcode }}</span>"
});

Alors juste faire:

<div id="app">
<my-input init-postcode="{{ old("postcode") }}"></my-input>
</div>

Voici le violon: https://jsfiddle.net/vL5nw95x/

Si vous essayez simplement de définir les valeurs initiales, mais que vous n'avez pas besoin d'une liaison bidirectionnelle, vous pouvez référencer directement l'accessoire - car vous n'appliquerez aucune modification - en utilisant v-bind:value:

Vue.component("my-input", {
props: {
"init-postcode": {
default: ""
}
},
template: "<span><input type="text" :value="initPostcode"> {{ postcode }}</span>"
});

Et le balisage:

Voici le violon: https://jsfiddle.net/pfdgq724/

---

0 pour la réponse № 2

Je travaille de manière simple pour le faire en utilisant le contrôleur laravel 5.4 pour envoyer les données directement

En vue Laravel:

 <input  class="form-control"  id="ciudad" name="ciudad" type="text"  v-model="documento.ciudad"  value="{{ old("ciudad",  isset($documento->ciudad) ? $documento->ciudad : null) }}" >

dans vue.js 2.0

 data: {

documento: {
ciudad: $("#ciudad").val(),
},

},

Dans Laravel Controller

  $documento = ReduJornada::where("id_documento",$id)->first();

return view("documentos.redujornada")->with(compact("documento"));

---