Problem mit Reaktivität bei einer Vue in Vue.js

pkm

pkm

Aktives Mitglied
Ich lerne gerade Laravel in Verbindung mit Vue.js.

Dabei habe ich eine Vue, die ich an folgender Stelle einbinde: <div id="app">

HTML:
@extends('layouts.layout')

        @section('content')
        <div class="default-textfield">
              
             <div>Pizzas as fetched with axios:</div>   
                                        
                     <div id="app">
                       <div class="container"> 
                         <articles></articles>
                       </div>
                    </div>
                
                   <script src="{{ asset('js/app.js') }}"></script>
    
        </div>
        @endsection

Im public-Ordner meines Laravelprojekts habe ich eine Datei app.js, und mit new Vue(... erstelle ich dort die Vue, welcher ich eine Methode namens "ordered", was man im folgenden Code sehen kann:

Javascript:
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');


window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('articles',
require('./components/Articles.vue').default
);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
    methods : {
    ordered : function() { //Ich kann irgendwie von der Komponente aus diese Funk nicht aufrufen.
                  
              axios.get('http://localhost/project/public/pizzas/1').then(resp => {

              alert('test');

              return JSON.stringify(resp.data);

});               
    }
     }
});

Im Template namens Articles.vue möchte ich mit {{ ordered() }} die ordered-Funktion aufrufen.

Nun habe ich ein Problem mit der Methode "ordered", denn es heißt:

Property or method "ordered" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Wenn ich in app.js ein data-JSON-Objekt anlege im Konstruktor von Vue, wo ich ordered: null definiere, dann bringt das leider nichts.

Daher dachte ich - falls es hier Laravel/Vue-Profis gibt, vielleicht können die mir ja einen Tipp geben, wie ich das richtig coden soll, denn aus gugel und der Vuedokumentation bin ich nicht so richtig schlau geworden.

Hier ist die Struktur:

1600949614877.png
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
krgewb Problem mit writeln Angular, React, JQuery - Fragen zu JavaScript 2
H Problem mit vom Server gelieferten Objekten Angular, React, JQuery - Fragen zu JavaScript 11
isaac77 Java Script implementierung Problem & Frage Angular, React, JQuery - Fragen zu JavaScript 0
N Problem - Google Analytics Tracking Javascript Datei von eigenen Server laden Angular, React, JQuery - Fragen zu JavaScript 1
H "form 1 in undefined" problem Angular, React, JQuery - Fragen zu JavaScript 2
C Problem beim Laden des Saalplans Angular, React, JQuery - Fragen zu JavaScript 5
4 Java Anfänger Problem Angular, React, JQuery - Fragen zu JavaScript 4
I iframe killer problem Angular, React, JQuery - Fragen zu JavaScript 3
J Problem:Zugriff auf Ausgabefeld (HTML-Formular)) Angular, React, JQuery - Fragen zu JavaScript 3
H problem mit IE Angular, React, JQuery - Fragen zu JavaScript 2
K Laufschrift Problem. Angular, React, JQuery - Fragen zu JavaScript 4
S Problem bei MSN Script Angular, React, JQuery - Fragen zu JavaScript 3
M Problem mit Java-Funktion Angular, React, JQuery - Fragen zu JavaScript 3
H Java Script Problem Angular, React, JQuery - Fragen zu JavaScript 11
F Ich habe ein Problem mit dem öffnen eines neuen Fensters Angular, React, JQuery - Fragen zu JavaScript 3
Developer_X Java Script, Problem beim staten Angular, React, JQuery - Fragen zu JavaScript 22
S Problem mit Formular ! Angular, React, JQuery - Fragen zu JavaScript 4
S Dringendes onclick Problem mit variable - Danke Angular, React, JQuery - Fragen zu JavaScript 2
D IE Problem Angular, React, JQuery - Fragen zu JavaScript 4
G Java Gallery mit reload ohne iframe Problem Angular, React, JQuery - Fragen zu JavaScript 6
J JS-Menü-Problem :-( Angular, React, JQuery - Fragen zu JavaScript 2
E Countdown Problem Angular, React, JQuery - Fragen zu JavaScript 5
T Problem mit getElementById Angular, React, JQuery - Fragen zu JavaScript 1
G Problem Bei Sound Angular, React, JQuery - Fragen zu JavaScript 4
S Ich hab da ein Problem mit einem JavaScript. Angular, React, JQuery - Fragen zu JavaScript 2
M Problem mit Vote Fenster Angular, React, JQuery - Fragen zu JavaScript 3
K Problem mit einbinden Angular, React, JQuery - Fragen zu JavaScript 2
M Problem mit Berechnungen Angular, React, JQuery - Fragen zu JavaScript 5
S Problem mit Aufruf einer *.js-Datei Angular, React, JQuery - Fragen zu JavaScript 2
N Problem mit onchange Listener Angular, React, JQuery - Fragen zu JavaScript 1
G Problem beim Einbinden von JAVA-Dropdown-Menu Angular, React, JQuery - Fragen zu JavaScript 7
G CSS-Problem mit "selected" Angular, React, JQuery - Fragen zu JavaScript 2
K Habe aber trotzdem ein Problem mit Javascript Angular, React, JQuery - Fragen zu JavaScript 2
F Problem mit random alerts Angular, React, JQuery - Fragen zu JavaScript 5
G utf8 problem wenn java deaktiviert ist Angular, React, JQuery - Fragen zu JavaScript 2
G Zeilenumbruch Problem Angular, React, JQuery - Fragen zu JavaScript 10
R Riesen Problem Angular, React, JQuery - Fragen zu JavaScript 2
Z Globale Veriable problem Angular, React, JQuery - Fragen zu JavaScript 2
P Problem mit Blog Angular, React, JQuery - Fragen zu JavaScript 3
G Problem mit Frames Angular, React, JQuery - Fragen zu JavaScript 9
S Problem mit Mozilla Angular, React, JQuery - Fragen zu JavaScript 9
N JS Problem mit Dia Show Angular, React, JQuery - Fragen zu JavaScript 5
H Problem mit Klappmenü. Angular, React, JQuery - Fragen zu JavaScript 2
A Problem mit checkdate-Funktion. Angular, React, JQuery - Fragen zu JavaScript 3
J Problem mit Java Menü Angular, React, JQuery - Fragen zu JavaScript 4
H [Problem] Tageszeitenabhängige Rotation von Flashfilmen Angular, React, JQuery - Fragen zu JavaScript 3
B document.forms problem Angular, React, JQuery - Fragen zu JavaScript 3
N tree_items problem Angular, React, JQuery - Fragen zu JavaScript 3
G 2 Frames mit einem Link verändern - Problem Angular, React, JQuery - Fragen zu JavaScript 4
F Problem mit "PHYSLET" Angular, React, JQuery - Fragen zu JavaScript 3
G Problem Angular, React, JQuery - Fragen zu JavaScript 2
M Merkwürdiges Problem Angular, React, JQuery - Fragen zu JavaScript 3
C Javascript problem links ohne funktion Angular, React, JQuery - Fragen zu JavaScript 12
W Problem bei Links Angular, React, JQuery - Fragen zu JavaScript 4
M Problem - java-script fehlt (???) Angular, React, JQuery - Fragen zu JavaScript 3
A problem mit pulldown Angular, React, JQuery - Fragen zu JavaScript 3
C Leerzeichen entfernen... Problem Javascript Angular, React, JQuery - Fragen zu JavaScript 1
X Mehrfaches Nutzen einer Funktion Angular, React, JQuery - Fragen zu JavaScript 1
H Bilder auf einer Webseite anzeigen Angular, React, JQuery - Fragen zu JavaScript 4
Anfänger2011 Ergebnis einer Funktion direkt in Variable speichern Angular, React, JQuery - Fragen zu JavaScript 6
E Aufbau einer URL Angular, React, JQuery - Fragen zu JavaScript 2
P Lauftext als Java Script Mehrmals auf einer Seite abspielen funktioniert nicht Angular, React, JQuery - Fragen zu JavaScript 3
A Facebool und Twitter an einer Stelle Angular, React, JQuery - Fragen zu JavaScript 1
P mehrere Funktionen in einer aufrufen und onklick zuweisen Angular, React, JQuery - Fragen zu JavaScript 14
K dynamischer Headbereich einer Webseite Angular, React, JQuery - Fragen zu JavaScript 3
G hintergrundbild einer webseite per uhrzeit zu verändern Angular, React, JQuery - Fragen zu JavaScript 4
J Mehrere Alertboxen auf einer seite möglich ? Angular, React, JQuery - Fragen zu JavaScript 2
G Wer kann mir Helfen, bei einer automatischen Diashow? Angular, React, JQuery - Fragen zu JavaScript 2
R onload Aufruf einer Funktion in einer Funktion Angular, React, JQuery - Fragen zu JavaScript 2
S HTML Cod in einer bestimmten stelle einfügen. Angular, React, JQuery - Fragen zu JavaScript 12
H Zelle einer Tabelle auslesen Angular, React, JQuery - Fragen zu JavaScript 2
G Status einer dynamischen erstellten "Checkbox[]" ä Angular, React, JQuery - Fragen zu JavaScript 3
C Flashfilm aus einer HTML-Seite im Fullscreen öffnen Angular, React, JQuery - Fragen zu JavaScript 2
S Verweise einer Auswahlliste in einem IFrame anzeigen Angular, React, JQuery - Fragen zu JavaScript 5
M Frage wegen einer einfachen Java Bildergalerie Angular, React, JQuery - Fragen zu JavaScript 8
G Erstellungsdatum/-zeit einer anderen Datei ausgeben Angular, React, JQuery - Fragen zu JavaScript 2
F Browser-/OS-Abfrage beim Laden einer Internetseite Angular, React, JQuery - Fragen zu JavaScript 3
M 2 PopUps auf einer .htm...Probleme Angular, React, JQuery - Fragen zu JavaScript 2

Ähnliche Java Themen

Anzeige

Neue Themen


Oben