J'essaie de construire un programme assez simple mais peut-être que je ne comprends pas vraiment comment vue fait les choses.
J'ai besoin d'ajouter l'inventaire en haut et de l'utiliser dans l'une des deux options. Donc, lorsque j'appuie sur + pour obtenir un dégagement, cela supprime de l'inventaire et lorsque j'appuie sur - cela ajoute à l'inventaire jusqu'à 0.
Cela fonctionne si je n'en crée qu'une avec des variables statiques, mais comme il y aura plus d'emplacement, je suis essayer de transmettre cet identifiant de l'emplacement via un clic. J'ai utilisé des mots mais il y aura une pièce d'identité à la fin. Le problème est que je ne peux pas les faire fonctionner une fois que je les ai réussis. Lorsque je les enregistre sur la console, je peux les voir mais ils ne fonctionnent toujours pas. Qu'est-ce que j'oublie ici?
<script>
var app = new Vue({
el: '#app',
data: {
inventory: 4,
clearance: 1,
floor: 0,
},
methods: {
addInventory: function (event, id){
if(this.inventory > 0){
this.id++ ;
this.inventory-- ;
console.log(id);
}
},
removeInventory: function (event, id){
if(this.id > 0){
this.id-- ;
this.inventory++ ;
console.log(id);
}
},
}
})
</script>
Le code Vue
<tr>
<td>New</td>
<td>
<div class="row">
<div class="col">
<h1>@{{ inventory }}</h1>
</div>
<div class="col">
<button type="button" class="btn btn-danger" v-on:click.prevent="addInventory($event, 'inventory')">+</button>
</div>
</div>
</tr>
<tr>
<td>Floor Model</td>
<td>
<div class="row">
<div class="col">
<button type="button" class="btn btn-success" v-on:click.prevent="removeInventory($event, 'floor')">-</button>
</div>
<div class="col">
<h1>@{{ floor }}</h1>
</div>
<div class="col">
<button type="button" class="btn btn-danger" v-on:click.prevent="addInventory($event, 'floor')">+</button>
</div>
</div>
</td>
</tr>
<tr>
<td>Clearance</td>
<td>
<div class="row">
<div class="col">
<button type="button" class="btn btn-success" v-on:click.prevent="removeInventory($event, 'clearance')">-</button>
</div>
<div class="col">
<h1>@{{ clearance }}</h1>
</div>
<div class="col">
<button type="button" class="btn btn-danger" v-on:click.prevent="addInventory($event, 'clearance')">+</button>
</div>
</div>
</td>
</tr>
</tbody>
Merci
4 Réponses :
Votre champ data doit être une fonction qui renvoie un objet. Cela résout le problème de toutes les copies de ce composant accédant aux mêmes données:
data() {
return {
inventory: 4,
clearance: 1,
floor: 0,
}
}
Edit: déclaration de retour oubliée
Vous manquez le retour, donc cette propriété de données n'est pas correctement réactive.
De plus, cela ne s'applique qu'après la configuration initiale de la vue. La façon dont il l'a fait est très bien.
@MichaelMano Pouvez-vous expliquer cela? Si vous ne renvoyez pas d'objet, toutes les propriétés de données se référenceront dans chaque composant. En quoi est-ce différent avant l'installation?
@Arc bien sûr, 012.vuejs.org/guide/best-practices.html le deuxième bloc de code. Voyez comment c'est seulement un objet et non une fonction qui renvoie un objet? C'est très bien lorsque vous utilisez new Vue , mais à l'intérieur de tout composant enfant, il doit être une fonction qui renvoie un objet.
Les données doivent être renvoyées en tant qu'objet pour éviter que tous les composants ne se réfèrent à la même propriété de données.
data: () => {
return {
//properties here
}
}
ou
data: () => ({
//properties here
})
Pour le réglage ces valeurs de manière dynamique et en évitant un tas de méthodes, regardez cet exemple: https://codepen.io/arcaster42/pen/PooVYVE
p >
Alors copiez ma réponse et postez-la vous-même?
Merci à tous les deux pour votre aide. Cependant comment puis-je passer ma variable sous this.id ???
Pour accéder à this.id, vous devrez l'avoir dans vos données. Dans les méthodes, "this" fera référence à vos données. L'inventaire est configuré de cette façon maintenant.
Salut @Arc Je suis toujours confus à ce sujet. donc maintenant this.id retourne null ce que j'essaie de faire est de convertir this.id en this.clearance ou this.floor et renvoyer le nombre. si je tape this.clearnace en bref, je veux que this.id soit programmatique. Peut-être que je l'ai mal expliqué, je m'excuse.
Eh bien, vous passez id comme argument, donc vous n'avez pas besoin de "this.id" mais simplement de "id". À quoi doit exactement faire référence id? D'où est ce que ça vient?
Donc this.id ou id doit être égal à l'une de ces variables clear ou floor ibb.co/kKdX2T7
J'ai ajouté un exemple de code Pen à ma réponse. Cela peut vous aider à filtrer et à ne pas utiliser autant de méthodes.
Malheureusement, cela ne fonctionne toujours pas car maintenant this.floor est toujours codé en dur. Ce dont j'ai besoin, c'est que this.floor soit quelque chose comme this.x où x peut être n'importe quelle variable.
Premièrement, il ne sert à rien d'essayer d'utiliser une seule méthode, vous pouvez en créer plusieurs qui la gèrent. Si vous souhaitez utiliser une seule méthode, vous pouvez, mais vous utiliseriez des clés pour trouver celle qui a été sélectionnée.
Vous pouvez également désactiver le bouton lorsqu'une valeur est à 0, vous n'aurez donc pas à faire d'instructions if à l'intérieur de cette méthode.
Je ne suis pas tout à fait sûr que ce soit ce que vous recherchez ci-dessous, mais cela vous donnera un avertissement.
<script>
var app = new Vue({
el: '#app',
data: {
inventory: 4,
clearance: 1,
floor: 0,
},
methods: {
addFlorStock() {
this.floor = this.floor++;
},
removeFloorStock() {
this.floor = this.floor--;
},
addClearanceStock() {
this.clearance = this.clearance++;
},
removeClearanceStock() {
this.clearance = this.clearance--;
},
addInventory() {
this.inventory = this.inventory++;
},
removeInventory() {
this.inventory = this.inventory--;
},
}
})
</script>
<tbody>
<tr>
<td>New</td>
<td>
<div class="row">
<div class="col">
<h1>@{{ inventory }}</h1>
</div>
<div class="col">
<button
type="button"
class="btn btn-danger"
v-on:click.prevent="addInventory"
>
+
</button>
</div>
</div>
</td>
</tr>
<tr>
<td>Floor Model</td>
<td>
<div class="row">
<div class="col">
<button
type="button"
class="btn btn-success"
:disabled="floor <= 0"
v-on:click.prevent="removeFloorStock"
>
-
</button>
</div>
<div class="col">
<h1>@{{ floor }}</h1>
</div>
<div class="col">
<button
type="button"
class="btn btn-danger"
v-on:click.prevent="addFloorStock"
>
+
</button>
</div>
</div>
</td>
</tr>
<tr>
<td>Clearance</td>
<td>
<div class="row">
<div class="col">
<button
type="button"
class="btn btn-success"
:disabled="clearance <= 0"
v-on:click.prevent="removeClearanceStock"
>
-
</button>
</div>
<div class="col">
<h1>@{{ clearance }}</h1>
</div>
<div class="col">
<button
type="button"
class="btn btn-danger"
v-on:click.prevent="addClearanceStock"
>
+
</button>
</div>
</div>
</td>
</tr>
</tbody>
Malheureusement, j'essayais d'éviter cela car il y aura beaucoup d'endroits. J'essayais de créer deux méthodes dynamiques.
ok puis changez la façon dont vos données sont configurées et trouvez l'identifiant comme clé. Je mettrai à jour
Ok, voici la réponse que je cherchais si quelqu'un d'autre en a besoin.
En bref, je voulais que le code fonctionne pour n'importe quel nombre d'éléments du tableau.
InventoryTotal est un tableau comme celui-ci.
var vm = new Vue({
el: '#app',
data() {
return {
inventoryTotal: '',
}
},
methods: {
addInventory: function (name ,index, item){
if(0 == index){
this.inventoryTotal[0].stock++ ;
}else if(this.inventoryTotal[0].stock > 0){
this.inventoryTotal[0].stock-- ;
this.inventoryTotal[index].stock++ ;
}
},
removeInventory: function (name, index, item){
if(0 == index && this.inventoryTotal[0].stock > 0){
this.inventoryTotal[0].stock-- ;
}else if(this.inventoryTotal[index].stock != 0){
this.inventoryTotal[index].stock-- ;
this.inventoryTotal[0].stock++ ;
}
},
}
})
<td v-text="location.status.name"></td>
<td>
<div class="row">
<div class="col">
<button type="button" v-if="location.status.name != 'New Stock'" class="btn btn-warning" v-on:click.prevent="removeInventory(location.status.name , index , location.stock)">-</button>
</div>
<div class="col">
<h1 v-text="location.stock"></h1>
</div>
<div class="col">
<button type="button" v-if="location.status.name != 'New Stock'" class="btn btn-danger" v-on:click.prevent="addInventory(location.status.name , index , location.stock)">+</button>
</div>
</div>
</tr>
Script
XXX
Vous essayez de modifier dynamiquement des éléments avec la même méthode. Cela peut être fait mais en trouvant des éléments dans un tableau et des valeurs. Créez simplement des méthodes séparées et attachez le clic à chaque bouton.