0
Ich habe Probleme beim Zugriff auf Daten in der Vue-Komponente. Ich verwende prop, um meine Daten aus der Ansicht an die Komponente zu übergeben. Ich benutze Laravel.Zugriff auf Vue-Komponentendaten
<fav-btn v-bind:store="{{ $store }}"></fav-btn>
Und meine Komponente wie folgt aussieht:
<template>
<a href="#" class="btn-link text-danger" v-on:click="favorite">
<i v-bind:class="{ 'fa fa-heart fa-2x': isFavorited == true, 'fa fa-heart-o fa-2x': isFavorited == false }" class="" aria-hidden="true"></i>
</a>
</template>
<script>
export default {
props: ['store'],
data(){
return{
isFavorited: this.store.favoritable.isFavorited,
}
},
methods: {
favorite: function() {
this.AjaxRequest();
this.ToggleFav();
},
ToggleFav: function() {
this.isFavorited = !(this.isFavorited);
},
AjaxRequest: function() {
if (this.isFavorited)
{
axios.delete('stores/' + this.store.favoritable_id);
}
else {
axios.post('stores/' + this.store.favoritable_id);
}
}
}
}
</script>
In Vue DevTools kann ich alle Objekte in Requisiten sehen, aber ich kann sie nicht die isFavorited Zugriff immer falsch bleibt. Greife ich falsch auf die Objektattribute zu?
Was ist der Wert von 'store' in der Komponente? Sind Sie sicher, dass es richtig passiert ist? – Pradeepb
Behalten Sie die berechnete Eigenschaft "isfavorited". – Jewel
Ich habe das Problem gefunden. Die Komponente wird einfach nicht im Browser aktualisiert, ich weiß nicht, wie ich sie beheben kann. Aber heute wachte ich Computer aus dem Schlaf und die Änderungen wurden im Browser angewendet ... –