vue项目bug整理

1.Model对话框点击确定后iview会自动关闭窗口

<template>
   Modal(ref="endorseModel" v-modal="endorseModel")
</template>

<script>
    export default {
        data(){
            return {
                visilble : false,
            }
        },
        mounted(){
            //屏蔽内置关闭方法
            //之后只能通过控制visible来关闭modal了
            this.$refs.endorseModel.visible = true;
						this.endorseModel = true;
        }
    }
</script>

2. iview select下拉框缓存

<select ref="select">
<option>1</option>
<option>2</option>
</select>

this.$refs.select.setQuery(null)

3. select选择器无法赋默认值

<template>
  <Form :model="form">
  <FormItem prop="item">
  	<Select :model="item">
      <Option v-for="v in options" :key="v.id">{{v.id}}</Option>
    </Select>
  </FormItem>
</Form>
</template>

<scirpt>
export default{
  data(){
      return {
        options: [],
        form: {
          item: ""
        }
      }
	},

  mounted(){
    this.options = [{id: "123"}]
    this.form.item = '123'
  }
}
</scirpt>

4. textarea阻止默认事件

需求如下：

textarea中，输入回车键时添加分号

分析需求，分下面几步

1. 阻止默认回车换行
2. 获取值并添加分号

<!-- 此处使用了Vue语法中的事件修饰符 keydown.enter -->
<!-- 使用keyup阻止默认事件不起作用 -->
<div id="app">
<textarea v-mode="text" @keydown.enter="submit"></textarea>
</div>


<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
	new Vue({
    el: 'app',
    data(){
      return {text: ""}
    },
    methods:{
      submit(e){
        // 浏览器阻止默认事件兼容
        if (e.preventDefault) e.preventDefault();
        else window.event.value = false;
        // 修改值
        let _ = this.text;
        if (_.charAt(_.length-1) === ";") return
        else this.text += ";"
      }
    }
  })
</script>

5. router-view不显示

这是新手很容易犯的错，由于控制台也不报错，所以排查起来相对困难

// router.js
export const router = new Router({
    mode: 'history',
    routes: routers
});
routes不要写成routers