vue.js 绑定数组, 数据源改变,view不更新问题

<!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>