doubleyong
管理员
管理员
  • 最后登录2026-05-25
  • 发帖数1198
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:9230回复:0

[vue]vue中使用$set()方法,解决数据不渲染的问题

楼主#
更多 发布于:2018-10-24 16:32
在vue中,做了一个修改,但是在点击保存时,修改的值没有渲染到页面上,可以值已经被修改。
这时需要使用this.$set()方法来修改值,因为此方法修改值后,会重新渲染页面

图片:save.jpg


代码如下:

<div id="app">
    名称:<input type="text" v-model="linName">
    价格:<input type="text" v-model="price">
    <button @click="save">保存</button>
    查询:<input type="text" v-model="search">
    <ul>
         <li v-for="(item,index) in linshiFun()" :key="index">
                pw_index+1:pw_item.name-pw_item.price <a @click="del(index)">删除</a>
             <a @click="update(index)">修改</a>
         </li>
         <li v-if="linshiFun().length==0">没有数据</li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
    Vue.config.productionTip=false;
    var vm = new Vue({
        el:"#app",
        data: {
            linshi:[
                {"name":"薯片","price":8},
                {"name":"辣条","price":6},
                {"name":"乐百事","price":7},
                {"name":"开心果","price":28},
                {"name":"酸奶","price":8},
                {"name":"牛肉粒","price":17}
            ],
            search:"",
            index:-1,
            linName:"",
            price:""
        }
        ,methods:{
            del:function (index) {
            },
            linshiFun:function () {
              let search = this.search;
                return this.linshi.filter(function(item){
                    return item.name.indexOf(search)>-1;
                })
            },
            update:function (index) {
                this.index = index;
                this.linName = this.linshi[index].name;
                this.price = this.linshi[index].price;
            },
            save:function () {
                this.linshi[this.index].name = this.linName;
                this.linshi[this.index].price = this.price;
            }
        }
    });
上述代码,修改没有问题,
但如果,我们把save方法改成如下:
save:function () {
      var obj =new Object();
      obj.name=this.linName;
      obj.price=this.price;
      this.linshi[this.index] = obj;
  }
发现,值改了,但是页面不能更新。
解决方法:使用$set方法来更新数据

//方法一
// this.$set(this.linshi[this.index],"name",this.linName);
// this.$set(this.linshi[this.index],"price",this.price);
//方法二
// $set: 是否被修改,如果修改后,后重新渲染页面
// 2. 是否被修改,如果是引用内容,只修改内容,地址不变的话,是判断为没有改变
  this.$set(this.$data,"linshi",newlinshi);
其中,newlinshi代码如下:
var newlinshi= [];
for(var i=0;i<this.newlinshi.length;i++){
    if(i==this.index){
          newlinshi.push(ob);
    }else{
          newlinshi.push(this.list[i]);
    }
}
当然,你还可以使用:vm.$forceUpdate();来进行更新,更多关vm.$forceUpdate,请看另一篇文章
http://bugshouji.com/shareweb/t601

最新喜欢:

sy5415sy5415
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号