[英]Can't update value in data object,that i passing to dom in vue.js
我试图使用axios从Firebase数据库中获取一个对象，并且当我从其中获取数据时，我想在vue数据对象中分配给我的users数组。 当我console.log this.users时，它具有价值，但是当我尝试在DoM中打印时，它显示为空数组。我尝试vm。$ forceUpdate（），所以也许这只是DoM，没有得到更新。但是它没有不起作用。谢谢您的帮助。
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(function (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. created(){ 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 eg 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>
在调用ajax之前，在fetchData方法中，从this获取一个实例，然后在ajax主体中使用该实例！ 您也不需要watch用户。 它被绑定。 您可以在下面看到：
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 eg 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>
好的，您的问题已在此更新的代码段中修复。
提取用户请求完成后，响应被分配给users数组，而DOM则指向cohort 。 查看此<div v-for="people in cohort"> 。
我猜想使用mounted而不是created更好。 另外，您不必强制Vue重新渲染。
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 eg 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>
如果我将另一个对象中的一个对象用于选择选项，Vue.js不会更新值
[英]Vue.js doesn't update value if I use an object in another object for select option
如何使用vue.js从promise中的方法更新数据值？
[英]How can I update a data value from a method inside a promise with vue.js?
在 Vue.js 中，如何通过 vanilla js 更改 DOM 后恢复数据绑定？
[英]In Vue.js, how can I restore data binding after changing DOM through vanilla js?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.