0
Ich hämmere schon den ganzen Tag mit meinem Kopf gegen dieses Problem. Folgendes Problem, dass meine Mustache Bracer Komponenten nicht auf meiner Website gerendert werden. Ich bekomme nur die nicht gerenderten Komponenten in Armschienen als Ausgabe.Vue rendert keinen Inhalt in den Barteschablonen meiner Komponente ({{}})
//app.js
//
import Vue from 'vue'
new Vue({
//We want to target the div with an id of 'events'
el: '#events',
//Here we can register any values or collections that hold data
//for the application
data: {
event: {
name: '',
description: '',
date: ''
},
events: []
},
// Anything within the ready function will run when the application loads
ready: function() {
//When application loads, we want to call the method that initializies
//some data
this.fetchEvents();
},
// Methods we want to use in our application are registered here
methods: {
//We dedicate a method to retrieving and setting some data
fetchEvents: function() {
// body...
var events = [{
id: 1,
name: 'TIFF',
description: 'Toronto International Film Festival',
date: '2015-09-10'
},
{
id: 2,
name: 'The Martian Premiere',
description: 'The Martian comes to theatres',
date: '2015-10-02'
},
{
id: 3,
name: 'SXSW',
description: 'Music, film and interactive festival in Austin, TX'
date: '2016-03-11'
}
];
//Set is a convenience method provided by Vue that is similar to pushing
//data onto an array
this.$set('events', events);
},
//Adds an event to the existing events array
addEvent: function() {
if (this.event.name) {
this.events.push(this.event);
this.event = {
name: '',
description: '',
date: ''
};
}
}
deleteEvent: function(index) {
if (confirm("Are you sure you want to delete this Event?")) {
//$remove is a Vue convenience method similar to splice
this.events.$remove(index);
}
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- navigation bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i>Vue Events Bulletin</a>
</div>
</nav>
<!-- main body of our application -->
<div class="container" id="events">
<!-- add an event form -->
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Add an Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on:click="addEvent()">Submit</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<a href="#" class="list-group-item" v-repeat="event in events">
<h4 class="list-group-item-heading">
<i class="glyphicon glyphicon-bullhorn"></i> {{ event.name }}
</h4>
<h5>
<i class="glyphicon glyphicon-calender" v-if="event.date"></i> {{ event.date }}
</h5>
<p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>
<button class="btn btn-xs btn-danger" v-on:click="deleteEvent($index)">Delete</button>
</a>
</div>
</div>
</div>
<!-- JS -->
<!--<script src="node_modules/vue/dist/vue.js"></script> -->
<!--<script src="node_modules/vue-resource/dist/vue-resource.js"><!--</script> -->
<!--<script src="app.js"></script> -->
</body>
Angenommen, Sie Vue verwenden 2. In Vue 2, '$ Set' hat drei Argumente. Auch in diesem Fall ist es unnötig. Ändern Sie 'this. $ Set ('events', events);' in 'this.events = events'. Wie bereits in der Antwort erwähnt, ist 'ready' kein Vue2-Lifecycle-Handler oder ist '$ index'gültig. Ich schlage vor, dass Sie die Dokumentation zu Vue 2 durchlesen. – Bert
Danke, dass Sie sich die Zeit genommen haben, darüber zu schauen, ich habe Ihre vorgeschlagenen Dinge zu 'this.events = events' geändert und die Löschfunktion auskommentiert, da ich nur im Schnurrbart Inhalt haben möchte Armschienen für jetzt gemacht. Auch ich gehe noch durch die Vue 2 Dokumentation, wenn ich irgendwelche Lösungen finden kann, was ich falsch gemacht habe, aber bisher keinen Erfolg. Es ist immer noch das gleiche Ergebnis. Aber danke für Ihre Hilfe, sehr geschätzt! :) – drood87