Dev Faq
0
votes

Comment mettre à jour la valeur via l'événement dans le V-pour dans un VUE -Template

Je suis nouveau à Vue et auparavel ..

Je vais chercher des données de ressource API forte> à Laravel .. p>

Mon API contient 2Fields P> 

event(new UpdatedValue('div2', 6543));

6 commentaires

Vous devez mettre à jour ceci.progress dans écoute () pour re-rendu. Vous devriez lire la réactivité en profondeur à Vuejs.org/v2/guide/reactivity.html

Monsieur, comment pourrais-je mettre à jour ceci.Progress in écouter ().

Qu'est-ce que vous obtenez en écoutant mis à jourValue Impossible d'utiliser cela pour appuyer ou mettre à jour la progression?

Voulez-vous générer Console.log (E) dans votre "Vue mises à jour", (E) => "

@kurt frères Ceci est la sortie de console.log (E): {valeur: 4764, cible: "div2"}, où dans le bricoleur que j'ai utilisé >>> (Nouvelle mise à jourValue ("div2 ', 4764));

@Saleem the UpdatedValue renvoie {valeur: 4764, cible: "div2"}, après la console.log (e) .. Je veux que la valeur soit liée une fois que je déclenche la valeur par l'événement avec la cible (DIV) et la valeur. . >>> Evénement (Nouvelle mise à jourValue ('Div2', 4764)) ;. Pourriez-vous m'aider s'il vous plaît?

3 Réponses :

0
votes

Lorsque vous recevez l'événement à l'intérieur ECHO: 

listen(){
      Echo.channel('progress')
          .listen('UpdatedValue', (e) =>{

            let ToUpdate = this.progress.find(x => x.id === e.target)
            ToUpdate.value = e.value;
            //console.log(e);

    });

7 commentaires

Monsieur, je ne pouvais-je pas comprendre laissez Toupdate = ceci.progress.find (x => x.id === e.target) ..Coulez-vous s'il vous plaît expliquer? Merci

Bien sûr. C'est une fonction Array.Prototype.Find ( développeur.mozilla.org/en-us/docs/web/javascript/reference/... ). Il recherche à l'intérieur de la matrice d'éléments (this.rogress) pour l'élément qui a un identifiant égal à E.Target et renvoyer le premier élément trouvé (c'est-à-dire l'élément où vous souhaitez mettre à jour les données). De cette façon, cela reste réactif.

Monsieur, compris. Mais je dois lier la valeur à Div's dans la matrice de progression (de taille 4), dans le modèle que j'ai

{{progresdata.value}} , où il répète 4 fois avec les différentes valeurs. Lorsque je déclenche l'événement via Tinker >> événement (Nouvelle mise à jourValue ('div2', 224)); La valeur est mise à jour uniquement sur le premier DIV avec l'ID DIV (DIV2) ..I besoin de modifier aussi l'autre div ..Sait que c'est dans V-car je pourrais utiliser un seul div ..i veux aussi d'autres div. Identifiant particulier..Comment puis-je faire ça monsieur,?

Je viens de remarquer une chose importante. Vous définissez

{{progresdata.value}} vous ajoutez d'ID = "div2" à tous les éléments de la boucle V-for. Cela entraînera une erreur, car l'ID d'un élément doit être unique à l'intérieur du DOM.

Oui monsieur, je veux définir la DIV avec l'ID unique à tous les DIV à l'intérieur de la matrice de progression ..mais ils doivent contenir la valeur de l'API..ONCE que je déclenche l'événement que la DIV ciblée devrait changer avec la valeur donnée à travers la valeur donnée. Tinker..Comment puis-je faire ça monsieur? Merci.

Alors utilisez quelque chose comme: Cela générera un identifiant unique pour chaque élément comme: div_1, div_2, div_3 et ainsi de suite ..

Monsieur, j'ai essayé le code écouter () {echo.channel ('Progress') .Listen ('Mise à jourvalue', (E) => {laissez toupdate = this.trogress.find (x => x.id ==== e.target); toupdate.value = e.value;}); et dans le modèle mais j'ai reçu ne peut pas définir la «valeur» de propriété non définie sur App.js: 1956 Erreur..how pourrais-je résoudre ceci? Pourriez-vous s'il vous plaît aider monsieur? Impossible de lier la valeur à la DIV à l'aide de Tinker.

0
votes

Le problème avec la réactivité de Vue est qu'il ne peut pas déclencher si vous mettez à jour les propriétés imbriquées. Donc, si vous deviez trouver l'article de progression que vous souhaitez et mis à jour sa valeur, il ne serait pas reflété jusqu'à ce que quelque chose a obligé à reformuler.

Je pense que vous devriez pouvoir faire ce qui suit. En modifiant la matrice, le V-pour est basé sur, vous devez obtenir la réactivité que vous désirez. P>

Pour que la solution suivante fonctionne, vous devez renvoyer certaines informations d'identification dans l'événement d'écoute également disponible. dans l'élément de données de progression. Idéalement, comme dans ma solution suivante, l'événement renvoie un objet avec les mêmes propriétés que ce qui est dans la matrice de progression. En tant que tel, P> 

listen(){
    Echo.channel('progress').listen('UpdatedValue', (e) => {
        const idx = this.progress.findIndex((item) => {
            return item.id = e.id;
        });
        
        if (idx < 0) {
            this.progress.push(e);
        } else {
            this.progress.splice(idx, 1, e);
        }
    });

0 commentaires
0
votes

Vous pouvez essayer quelque chose comme celui-ci xxx

si cela ne fonctionne pas, vous pouvez décomposer la ligne de journal et laissez-moi savoir le résultat.

< div id = "div2" v-html = "progressdata.value"> peut être modifié avec

{{progresdata.value}} si Il n'y a pas de HTML à mettre à jour, mais juste numéro.

Exemple sur CODESANDBOX

18 commentaires

Merci Monsieur. J'ai mis en œuvre le code .J'ai reçu une erreur (erreur dans Render: "TypeError: Cant lire la propriété 'ID" de non défini ") et après note de la console.log i go (total de progression 0: Description:" Sunt quasi. "Objectif: 54974 Nom: "Quaerat Voluptas." The_Custom_ID: 1 valeur: 30789:

Après avoir passé la valeur à travers l'événement Tinker (Nouvelle mise à jour Value ('Div2', 224)); J'ai eu la matrice ci-dessous. {Valeur: 224, Target: "Div2"} Target: "Div2" Valeur: 224 Proto : Objet

Également dans la présente solution proposée:

est à l'intérieur d'un V-pour. Les éléments rendus auront tous Div2 comme ID et c'est une erreur

Quel est le courant dans le progrès et la chargement électronique) que vous obtenez sur l'événement. Il doit y avoir quelque chose de courant que vous pouvez comparer pour trouver l'élément dans la matrice de progrès. Comme je l'ai dit, vous pouvez entraîner la ligne de journalisation et laissez-moi savoir le journal afin que je puisse suggérer.

événement (Nouvelle mise à jourValue ('div2', 6543)); Pouvez-vous transmettre l'ID de progression au lieu du div2 ?

La chose commune est l'attribut de valeur qui est en cours de progression. La valeur dans la matrice de progression doit être mise à jour une fois que l'événement est déclenché via Tinker sur les Div respectives.

Impossible de ne pas vous procurer des progrès? Pourriez-vous s'il vous plaît aider ..Merci

Veuillez consulter le sandbox à CODESANDBOX.IO/s/ Condescendant-Brook-P1euk? File = / src / app.vue

Ceci est le journal (4) [{...}, {...}, {...}, {...}, ob : Observateur] 0: Description: "Erreur autonome Quasi Cumque Auto non Qui iste." Objectif: 54974 Nom: "Quaerat Voluptas." the_custom_id: 1 valeur: 54046. {Valeur: 88, Target: "Progress"}

Sûr Sir..Je veux que l'événement soit déclenché via Tinker, où vous vous déclenchez à travers le bouton ..

Monsieur, pourriez-vous vérifier le sandbox, où j'ai mis à jour l'ID 1 à tous les boutons, il ne reste que 1ère valeur que le reste reste inchangé.

Dans mon code, le résultat ressemble à Nom: 54974 Valeur: 565 Nom: 2 Valeur: 565 Nom: 463 Valeur: 565 Nom: 538018966 Valeur: 565. Quand j'ai essayé >> événement (Nouvelle mise à jourValue (3, 565)); Il est contraignant à tous les Divs pas à la DIV avec id = 3 ..Coulez-vous s'il vous plaît aidez-moi à résoudre ce problème?

@Komalraja Oui, l'écoute est déclenchée avec le bouton. J'essaie simplement de vous donner l'exemple de logique et de travail afin que vous puissiez la mettre en œuvre. Vous pouvez mettre à jour la progression de n'importe quelle méthode ou pour tout événement. La logique devrait être la même. Envoyez l'ID de progression avec une nouvelle valeur et la mise à jour en tant que méthode d'écoute. Je ne vois aucune modification sur Sandbox, si vous avez la configuration, veuillez partager le lien.

@Saleem monsieur, merci beaucoup pour votre soutien ..Il était vraiment très utile ..

@ Saleem Monsieur, je souhaite mettre en place une conception de l'interface utilisateur similaire au compteur de vitesse, avec 3 boutons exécutant, pause et supprimer. où l'idée est que nous avons 2 champs cible (objectif) et une valeur (de serveur) .. Pour EX si l'objectif est de 1000 et la valeur du serveur est de 600.1.Le utilisateur clique sur le bouton Exécuter, le bouton de la Le compteur de vitesse doit exécuter jusqu'au 600 2. Lorsque l'utilisateur clique sur le bouton Pause, pour EX, s'il clique sur 590, il devrait faire une pause de temps et encore devrait commencer à exécuter jusqu'à 600. 3. Si l'utilisateur appuie sur le bouton Supprimer la valeur de la totalité de la valeur. Coulez-vous s'il vous plaît dites-moi si vous des idées? Merci

@Saleem Sir, a mis à jour le code dans Sandbox, j'ai essayé un exemple de code avec Vuetify Composant, mais le plugin n'est pas importé, je suppose que je reçois peu d'erreurs. Je voudrais vérifier s'il vous plaît vérifier monsieur .. codesandbox.io/s/amazing-grothendieck-lp1ij?file=/src/app.vu E

Je suis désolé comme je n'ai jamais utilisé Vuetify vuemastery.com a de bons cours d'apprentissage VUEJS et Vuetify Vous pouvez explorer udemy.com aussi

@Saleem monsieur, merci pour votre réponse .. Je veux une interface utilisateur similaire à Speedomètre avec Laravel .. Je voudrais-tu me suggérer des idées autres que Vuetify, car Vuetify n'est pas une exigence. Merci.

Articles qui pourrait vous intéresser :

Laravel whereRaw - comment échapper à un '?'
Pourquoi est-ce que j'obtiens une erreur laravel lors de la création d'un nouveau projet?
Erreur HTTP 500 lors du téléchargement avec plupload
Laravel Echo n'écoute pas