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();
}
}
});