<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="info in infos"> {{info.name}} </li> </ul> <br> </div> <script> new Vue({ el: '#app', data: { infos: [{name:'nihao'}] }, create(){ init() ; }, method:{ init(){ var data=[{name:'张三'}] ; this.infos=data; } , }, }) </script> </body> </html>
输出是nihao
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="info in infos"> {{info.name}} {{info.sex}} </li> <li v-for="item in items"> {{item.message}} {{item.id}} </li> </ul> <button v-on:click="init">更新</button> <br> </div> <script> let app= new Vue({ el: '#app', data: { infos: [{name:'nihao'}], items: [ { message: "one", id: "1" }, { message: "two", id: "2" }, { message: "three", id: "3" } ], }, create(){ this.init() ; }, methods:{ init(){ this.items[0].message='one99'; //这么写一般是可以更新视图的 我只是给举this.$set()用法的例子 this.$set(this.items[0],'message','one133');//改成数字类型就不用了加引号 this.$set( this.items, 3, { message: "four", id: "4" })//这样就可以渲染到视图层了 // var data=[{name:'张三'}] ; // this.infos=data; //this.$set(infos,sex,"男"); Vue.set(this.infos,'sex', '男'); // this.$set('info.'+key, 'what is this?'); } , }, }) </script> </body> </html>
最终必须先初始化数组一项值,然后就可以添加值了.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="info in infos"> {{info.name}} {{info.sex}} </li> <li v-for="item in items"> {{item.message}} {{item.id}} </li> </ul> <button v-on:click="init">更新</button> <br> </div> <script> let app= new Vue({ el: '#app', data: { infos: [{name:'nihao'}], items: [ { message: "", id: "" }, ], }, create(){ this.init() ; }, methods:{ init(){ this.items[0].message='one99'; //这么写一般是可以更新视图的 我只是给举this.$set()用法的例子 this.$set(this.items[0],'message','one133');//改成数字类型就不用了加引号 this.$set( this.items, 0, { message: "one", id: "1" })//这样就可以渲染到视图层了 this.$set( this.items, 1, { message: "two", id: "2" })//这样就可以渲染到视图层了 // var data=[{name:'张三'}] ; // this.infos=data; //this.$set(infos,sex,"男"); Vue.set(this.infos,'sex', '男'); // this.$set('info.'+key, 'what is this?'); } , }, }) </script> </body> </html>
methods: { textTranslate: function (text, to) { let vm = this $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: 'jsonp', data: { q: text, appKey: this.appKey, salt: this.salt, from: this.from, to: to, sign: md5(this.appKey + text + this.salt + this.key) }, success: function (data) { vm.$set(vm.$data, 'translatedText', data.translation[0]) } }) } }
注意:data 内没有全部定义好行数是有问题的,特别是未初始化的data 内的数组,
必须主要data 内的数组不能 data:{ arr[],} arr就这么拉到了,请求过来的字段都要加进去,相当于展示列吧
不加进去数据是怼不进去的 ,少了似乎也不大行. 看到文章的朋友有更好的方法请留言
success: function (data) { 写法存在问题, 有些代码是从别的地方复制过来,这样写只会set data内数组的定义的一行,其余的未加进去的是无法set的
提示$set未定义
解决方法1:将。success改为箭头函数的写法，这样子箭头函数里的this其实是指向VueModel的，这样子用this看不会报错了
success: (data) => { this.$set(this.$data, 'translatedText', data.translation[0]) }
解决方法2:在执行函数中定义指向Model的变量 let vm = this ,用该变量替代this
methods: { textTranslate: function (text, to) { let vm = this $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: 'jsonp', data: { q: text, appKey: this.appKey, salt: this.salt, from: this.from, to: to, sign: md5(this.appKey + text + this.salt + this.key) }, success: function (data) { vm.$set(vm.$data, 'translatedText', data.translation[0]) } }) } }
下边代码 button 添加数据循环都没有问题, 通过ajax 请求过来的列表就出问题了,
少了那么个箭头 多了那个function 出现的报错
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="info in infos"> {{info.name}} {{info.sex}} </li> <li v-for="item in items"> {{item.message}} {{item.id}} </li> </ul> <button v-on:click="init">更新</button> <br> </div> <script> let app= new Vue({ el: '#app', data: { infos: [{name:'nihao'}], items: [ { message: "", id: "" }, ], }, create(){ this.init() ; }, methods:{ init(){ this.items[0].message='one99'; //这么写一般是可以更新视图的 我只是给举this.$set()用法的例子 this.$set(this.items[0],'message','one133');//改成数字类型就不用了加引号 this.$set( this.items, 0, { message: "one", id: "1" })//这样就可以渲染到视图层了 this.$set( this.items, 1, { message: "two", id: "2" })//这样就可以渲染到视图层了 for (var i=0;i<10;i++) { this.$set( this.items, i, { message: "two", id: i })//这样就可以渲染到视图层了 } // var data=[{name:'张三'}] ; // this.infos=data; //this.$set(infos,sex,"男"); Vue.set(this.infos,'sex', '男'); // this.$set('info.'+key, 'what is this?'); } , }, }) </script> </body> </html>