Vue常见的坑(2)

145 阅读2分钟

1. 给对象或者数组赋值

例如对象obj ={a:1},如果想要修改obj中的a属性,通过obj.a = 2这样赋值,页⾯不会更新,需使⽤
vue.set⽅法更改才会起作⽤, Vue.set(this,obj,a,2);
同样,如果要给obj增加⼀个新属性,如果该属性未在data中声明,页⾯也不会刷新。也就是vue⽂档中声明的“Vue 不能检测到对象属性
的添加或删除”,同样需要使⽤vue.set⽅法进⾏赋值才好使。 数组修改下标不会触发页面更新,同样需要Vue.set(数组, index, 值)

2.动态路由的参数变化时页面不会重新渲染

如果当前你在一个动态路由的页面,然后跳转到一个路径相同参数不同的动态路由页面是(只是数据发生改变),页面不行从新刷新渲染,数据不会改变。

watch: {
    '$route': {
        // 1. 获取新数据
        // 2. 赋值新数据
        // 3. vue监听到数据变化,从新渲染页面
    }
}

3.vue的input框,回车会触发刷新页面问题

经查阅资料得知原因,在当前页面元素中只有一个文本框时,点击回车时会自动提交表单;

W3C 标准中有如下规定:

When there is only one single-line text input field in a form,
the user agent should accept Enter in that field as a request to submit the form.
当表单中只有一个单行文本输入框时,客户端应该接受该区域中的Enter作为提交表单的请求

解决方案:

在el-form标签中加入@submit.native.prevent阻止事件即可:

<el-form :inline="true" :model="searchFrom" class="search-form" @submit.native.prevent>
 <el-form-item label="用户名">
 <el-input v-model="searchFrom.userName" clearable />
 </el-form-item>
 <el-button class="btn" @click="search">查询</el-button>
 </el-form>

4.data和methods定义相同命名

因为vue的执行顺序问题methods里面的会覆盖data里面的

new Vue({
	    el:'#chongming',
	    data:{
	        testname:'这是转换信息你知道么?'
	    },
	    methods:{
	        testname:function(){
	            console.log(123);
	        },
	        dianji:function(){
	            this.testname = this.testname.split('').reverse().join('');
	            this.testname();
	        }
	    }
	});