0👍
At your fetchData method, before call ajax, get an instance from this, then use that instance in your ajax body! also you don’t need to watch users. it’s binded. you can see below:
var SeptCoh = [
{
name: 'Example Name',
description: 'This is an example object. Never used an object before? Easy, find this in the code, copy it (including the curly brackets) and fill out your details while keeping the remaining syntax intact',
photourl: 'http://img.freepik.com/free-vector/business-people-with-speech-bubbles_1325-25.jpg?size=338&ext=jpg',
learningjournal: 'http://yourplunkhere.smth',
},
];
var app = new Vue({
el: '#app',
data: {
user:{
name:'',
description:'',
photourl:'',
learningjournal:''
},
users:[],
cohort:SeptCoh,
},
methods:{
//Posting data to Firebase
submit(){
axios.post('https://september-cohort.firebaseio.com/users.json', this.user)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
//fetching data from Firebase
fetchData(){
var vm = this;
axios.get('https://september-cohort.firebaseio.com/users.json').then(function (response) {
// console.log(response.data);
// this.users = response.data;
// console.log(this.users);
for(let key in response.data){
vm.users.push(response.data[key]);
}
console.log(vm.users);
})
.catch(function (error) {
console.log(error);
});
},
},
//Triggering fetching method.
created(){
this.fetchData();
},
//watching for changes in users array
watch:{
}
});<!DOCTYPE html>
<html>
<head>
<title>SEPCO: Elium September Cohort Page</title>
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pimg">
<div class="ui two column centered grid">
<h1 class="ui column inverted black center aligned header"><i class="fa fa-graduation-cap" aria-hidden="true"></i>SEPCO <br> <hr> <em>Elium September Cohort Page</em></h1>
</div>
</div>
<div class='ui container'>
<br>
<br> <br>
<h2 class="ui center aligned header">Welcome</h2>
<p id='introduction'>This is the collaborative page of the Elium September cohort. This is the beginning of a collaborative document and it <b>urgently needs your input!</b> So please go into the code, and make this page prettier, smarter, more content rich and of course more JavaScript-enriched.</p>
<i>Our clan name on codewars.com: SEPCO</i>
<div id='countdown'>
<!-- who wants to code up a count-down to the startdate of the bootcamp?? -->
</div>
<hr>
<h2 class="ui grey center aligned header"> Basics of how we want to prepare together.</h2>
<hr>
<ol class="ui list">
<li> Meet, decide on milestones togehter, then share how far you got e.g. using polls in Slack (for example "Did everyone finish watchandcode.com course?")</li>
<li> Scheduled hangout time for 2 hours everyday where people will be online working/studying which is non-mandatory. (doodle invite #1)
<ol>
<li>Suggestion Flo: paste link here?</li>
</ol>
</li>
<li> A Code Wars problem once a week every Friday starting Sept 28th. (doodle invite #2) answer will be on plunkr</li>
<li> Share your plunker/codepen/glitch sites! There's two ways how we recommend doing this:
<ol>
<li> We will use these codesharing-site accounts to share to the group what we have learned ( Share fun projects! And Code wars problems after completion)</li>
<li> Make a learning journal where you write down what you learned and what your personal goals are, this is also the ideal place to link to any other plunker/codepen/glitch creation you've made. The URL to this learning journal should be put into your object (see Part 3. below)</li>
</ol>
</li>
<li> HTML and CSS discussed more in 2 weeks (because this can be learned towards the end)</li>
</ol>
<h2 class="ui grey center aligned header">Shared Milestones</h2>
We want to get the following done by September 10th.
<ul>
<li>DECIDED: Complete practical javascript ("PJS") on watchandcode</li>
<li>PROPOSED: Additional JavaScript (define list of skills/concepts)</li>
<li>REVISIT first week of August: Basic HTML</li>
<li>REVISIT first week of August: Basic CSS</li>
<li>REVISIT first week of August: GIT</li>
</ul> <br>
[this section needs more love]
<h2 class="ui grey center aligned header"> Info on the cohort members & links to their learning journals on plunker </h2>
The cohort is an array and every member is an object. Dive into the sourcecode and add an object with your details. And then we asap need someone who makes this section better/prettier (see sourcecode)
<br> <br>
<!-- loop and create Info card Using Vue.js -->
<div id="app"> <!--Starting vue instance here-->
<div class="ui link cards">
<div v-for="people in cohort">
<div class="ui card">
<div class="image">
<img :src="people.photourl">
</div>
<div class="content">
<div class="header">{{people.name}}</div>
<div class="description">
<p>{{people.description}}</p>
</div>
<br>
<div class="extra content">
<span class="left floated">
<i class="arrow down icon"></i>
<a :href="people.learningjournal">Plunker</a>
</span>
</div>
</div>
</div>
</div>
</div>
<br>
{{users}}
<br><br><br>
<!-- Form for making users cards -->
<form class="ui form">
<div class="field">
<label>First/Last-Name:</label>
<input type="text" v-model="user.name" placeholder="First/Last Name">
</div>
<div class="field">
<label>Description of You:</label>
<textarea v-model="user.description"></textarea>
</div>
<div class="field">
<label>Picture Url:</label>
<input type="text" v-model="user.photourl" placeholder="Picture Url">
</div>
<div class="field">
<label>Plunker Url:</label>
<input type="text" v-model="user.learningjournal" placeholder="Plunker Url">
</div>
<button class="ui button" @click.prevent="submit">Submit</button>
</form
</div> <!--end of vue instance-->
<div id="footer"><hr></div>
<!-- Your web-app is https, so your scripts need to be too -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="client.js"></script>
</div>
</body>
</html>👤MHS
-1👍
Ok, your issues are fixed in this updated snippet.
When your fetch users request is done, the response was assigned to users array while your DOM was pointing to cohort instead. Look at this <div v-for="people in cohort">.
I guess using mounted instead of created is better. Also you don’t have to force Vue to re-render.
var SeptCoh = [
{
name: 'Example Name',
description: 'This is an example object. Never used an object before? Easy, find this in the code, copy it (including the curly brackets) and fill out your details while keeping the remaining syntax intact',
photourl: 'http://img.freepik.com/free-vector/business-people-with-speech-bubbles_1325-25.jpg?size=338&ext=jpg',
learningjournal: 'http://yourplunkhere.smth',
},
];
var app = new Vue({
el: '#app',
data: {
user:{
name:'',
description:'',
photourl:'',
learningjournal:''
},
users:[],
cohort: SeptCoh,
},
methods:{
//Posting data to Firebase
submit(){
axios.post('https://september-cohort.firebaseio.com/users.json', this.user)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
//fetching data from Firebase
fetchData(){
axios.get('https://september-cohort.firebaseio.com/users.json').then(response => {
// console.log(response.data);
// this.users = response.data;
// console.log(this.users);
const resultArray = [];
for(let key in response.data){
resultArray.push(response.data[key]);
}
this.users = resultArray;
console.log(this.users);
})
.catch(function (error) {
console.log(error);
});
},
},
//Triggering fetching method.
mounted(){
this.fetchData();
},
//watching for changes in users array
watch:{
users:function(){
var vm = this;
//setTimeout(vm.$forceUpdate(),1000);
}
}
});<!DOCTYPE html>
<html>
<head>
<title>SEPCO: Elium September Cohort Page</title>
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pimg">
<div class="ui two column centered grid">
<h1 class="ui column inverted black center aligned header"><i class="fa fa-graduation-cap" aria-hidden="true"></i>SEPCO <br> <hr> <em>Elium September Cohort Page</em></h1>
</div>
</div>
<div class='ui container'>
<br>
<br> <br>
<h2 class="ui center aligned header">Welcome</h2>
<p id='introduction'>This is the collaborative page of the Elium September cohort. This is the beginning of a collaborative document and it <b>urgently needs your input!</b> So please go into the code, and make this page prettier, smarter, more content rich and of course more JavaScript-enriched.</p>
<i>Our clan name on codewars.com: SEPCO</i>
<div id='countdown'>
<!-- who wants to code up a count-down to the startdate of the bootcamp?? -->
</div>
<hr>
<h2 class="ui grey center aligned header"> Basics of how we want to prepare together.</h2>
<hr>
<ol class="ui list">
<li> Meet, decide on milestones togehter, then share how far you got e.g. using polls in Slack (for example "Did everyone finish watchandcode.com course?")</li>
<li> Scheduled hangout time for 2 hours everyday where people will be online working/studying which is non-mandatory. (doodle invite #1)
<ol>
<li>Suggestion Flo: paste link here?</li>
</ol>
</li>
<li> A Code Wars problem once a week every Friday starting Sept 28th. (doodle invite #2) answer will be on plunkr</li>
<li> Share your plunker/codepen/glitch sites! There's two ways how we recommend doing this:
<ol>
<li> We will use these codesharing-site accounts to share to the group what we have learned ( Share fun projects! And Code wars problems after completion)</li>
<li> Make a learning journal where you write down what you learned and what your personal goals are, this is also the ideal place to link to any other plunker/codepen/glitch creation you've made. The URL to this learning journal should be put into your object (see Part 3. below)</li>
</ol>
</li>
<li> HTML and CSS discussed more in 2 weeks (because this can be learned towards the end)</li>
</ol>
<h2 class="ui grey center aligned header">Shared Milestones</h2>
We want to get the following done by September 10th.
<ul>
<li>DECIDED: Complete practical javascript ("PJS") on watchandcode</li>
<li>PROPOSED: Additional JavaScript (define list of skills/concepts)</li>
<li>REVISIT first week of August: Basic HTML</li>
<li>REVISIT first week of August: Basic CSS</li>
<li>REVISIT first week of August: GIT</li>
</ul> <br>
[this section needs more love]
<h2 class="ui grey center aligned header"> Info on the cohort members & links to their learning journals on plunker </h2>
The cohort is an array and every member is an object. Dive into the sourcecode and add an object with your details. And then we asap need someone who makes this section better/prettier (see sourcecode)
<br> <br>
<!-- loop and create Info card Using Vue.js -->
<div id="app"> <!--Starting vue instance here-->
<div class="ui link cards">
<div v-for="people in users">
<div class="ui card">
<div class="image">
<img :src="people.photourl">
</div>
<div class="content">
<div class="header">{{people.name}}</div>
<div class="description">
<p>{{people.description}}</p>
</div>
<br>
<div class="extra content">
<span class="left floated">
<i class="arrow down icon"></i>
<a :href="people.learningjournal">Plunker</a>
</span>
</div>
</div>
</div>
</div>
</div>
<br>
{{users}}
<br><br><br>
<!-- Form for making users cards -->
<form class="ui form">
<div class="field">
<label>First/Last-Name:</label>
<input type="text" v-model="user.name" placeholder="First/Last Name">
</div>
<div class="field">
<label>Description of You:</label>
<textarea v-model="user.description"></textarea>
</div>
<div class="field">
<label>Picture Url:</label>
<input type="text" v-model="user.photourl" placeholder="Picture Url">
</div>
<div class="field">
<label>Plunker Url:</label>
<input type="text" v-model="user.learningjournal" placeholder="Plunker Url">
</div>
<button class="ui button" @click.prevent="submit">Submit</button>
</form
</div> <!--end of vue instance-->
<div id="footer"><hr></div>
<!-- Your web-app is https, so your scripts need to be too -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="client.js"></script>
</div>
</body>
</html>- [Vuejs]-How to add vue js functions to jquery dynamically
- [Vuejs]-Laravel Spark – Adding additional fields to registration form, but when empty no errors are returned
Source:stackexchange.com