javascript

Vue集锦

目录
  1. 1. vue.js 未加载页面时会闪花括号
  2. 2. 页面正常显示，但是控制台报错：Cannot read property ‘xxx’ of undefined
  3. 3. 同时使用v-for和v-if
  4. 4. 在Vue的外部，调用Vue中定义的变量
  5. 5. vue去除前后空格trim
  6. 6. el-autocomplete select事件传递多个参数
  7. 7. watch监听属性同时执行了两次的原因排查

vue.js 未加载页面时会闪花括号

方法一：使用v-text，在没有编译之前，是不会显示的；

1
<template v-text="msg"></template >

方法二：
在上层加上v-cloak标签,并在css中配合样式:

1
2
3
[v-cloak] {
  display: none;
}

页面正常显示，但是控制台报错：Cannot read property ‘xxx’ of undefined

出现这种问题，是因为在数据初始化object的时候赋值为null，然后在页面中使用了obj.xxx进行数据渲染，但是此时从后端还没来得及把数据赋值给obj造成的，只要obj初始化的时候不用null，而是用[]进行赋值就可以了。

同时使用v-for和v-if

场景：循环联系人列表，根据性别显示联系人颜色。
Vue中，同一个节点不能同时使用v-for和v-if，下面的写法是错误的：

1
2
3
4
5
6
<li v-for="item in peoples" v-if="item.man" :key="item.id">
    {{ item.name }}
</li>
<li v-else class="red" v-for="item in peoples" :key="item.id" v-else>
    {{ item.name }}
</li>

正确的方法：

1
2
3
4
5
6
7
8
<template v-for="item in peoples">
    <li v-if="item.man" :key="item.id">
        {{ item.name }}
    </li>
    <li v-else class="red" :key="item.id">
        {{ item.name }}
    </li>
</template>

在Vue的外部，调用Vue中定义的变量

1
2
3
4
5
var vm = new Vue({
		el: '#app',
		data: {way: 1}
	})
console.log(vm.$data.way)

vue去除前后空格trim

一、使用trim修饰符
<input v-model.trim = "massage" >

二、使用filter过滤属性

1
2
3
4
5
6
<ul id="list">
  <input type="text" v-model="list.name">
  <p>
  {{list.name | trim}}
  </p>
</ul>

el-autocomplete select事件传递多个参数

问题

1
2
3
4
5
6
<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>

这是 Element UI 官方文档中 ​​el-autocomplete​​ 的示例，而这里的 ​​handleSelect​​ 默认绑定的参数是你选中的那条数据。

但是如果你需求用 ​​v-for​​ 生成多个组件，要把 ​​index​​ 给传进这个方法，你可能会这样做：

​​@select="handleSelect(item, index)"​​

经试验这是行不通的，那么该如何做呢？

方法

1
2
3
4
5
6
<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="((item) => {handleSelect(item, index)})"
></el-autocomplete>

这样你就能在 ​​handleSelect​​ 方法中拿到 ​​index​​ 参数了。

watch监听属性同时执行了两次的原因排查

在Vue中，使用watch监听一个属性时，如果发现回调函数执行了两次，而且是在Dialog组件中才发生这一情况的话，说明此Dialog组件在项目中被重复挂载了两次。
直接在封装的Dialog组件中添加这些钩子即可判断是否被重复挂载：

1
2
3
4
5
6
7
8
9
created() {
  console.log("checkinDialog created", Date.now())
},
mounted() {
  console.log("checkinDialog mounted", Date.now())
},
destroyed() {
  console.log("checkinDialog destroyed", Date.now())
}

实际被重复挂载的原因：
主页中引入了OrderDialog组件和PayDialog组件，而OrderDialog组件中也引入了PayDialog组件，导致PayDialog组件被重复挂载了两次。

如果不是使用watch监听vuex中的属性状态，我都没有发现过这个问题，所以影响也不大。一定要解决这个问题的话，可以在PayDialog组件上加v-if来控制PayDialog组件的挂载和销毁。