iview踩坑筆記

1、表單驗證不通過問題

輸入框中有值,但表單仍顯示不通過

解決方案：

• Form標籤中是否爲:model,不是則改爲:model
• Form標籤中必須添加ref
• FormItem標籤中prop的值必須與v-model一致，如：v-model='form.test'，那麼prop='test'

2、子組件的created()不生效

情景代碼:

// 父組件頁面代碼
<template>
      <father  v-show="flag === 'father'"></father>
       <son v-show="flag === 'son'  v-bind:info="info" ></son>
</template>

<script>
   export default {
   	  data() {
   	       return  {
   	              info: {
   	                   name: 'Jack',
   	                   age: 11
   	              }
   	       }
   	  }
   }         
</script>

// 子組件代碼
<template>
</template>

<script>
   export default {
   	  props:{
   	       info: {
               name: 'Jack',
               age: 11
   	      }
   	  },
   }         
</script>

不生效原因: v-show使得子組件和父組件在頁面刷新時，兩個都進行了渲染。因此子組件的created()在頁面刷新時已經執行，後續再顯示子組件時，便不再執行created()中的方法。

解決方案

• 使用v-if,使得進入子組件後刷新，重新渲染，觸發created()

 <template>
      <father  v-show="flag === 'father'"></father>
       <son v-if="flag === 'son'" v-bind:info="info" ></son>
</template>

• 使得進入子組件後刷新，重新渲染，觸發created()

<template>
      <father  v-show="flag=='father'"></father>
      <div v-show="flag === 'son'">
             <son v-if="refresh === true"  v-bind:info="info" ></son>
      </div>
       
</template>

<script>
   export default {
   	  props:{
   	       info: {
               name: 'Jack',
               age: 11
   	      }
   	  },
   	  data() {
   		 return {
   		 	refresh: false
   		  }
   	  },
   	  methods: {
   	        // 進入子組件時，觸發該方法即可
   	  		intoSon() {
   		  		this.refresh = false;
                 // $nextTick 是在下次 DOM 更新完成後，在執行裏面的函數，類似於回調
                this.$nextTick(() => { this.refresh = true; });
   	  		}
   	  }
   }         
</script>

• 通過watch監聽父組件的值，當值改變時，調用created()要執行的方法

// 子組件代碼
<template>
</template>

<script>
   export default {
   	  props:{
   	       info: {
               name: 'Jack',
               age: 11
   	      }
   	  },
   	  methods: {
   	  	initMethod() {}
   	  }
   	  computed: {
           watchInfo () {
               return this.Info.name;
           }
       },
       created() {
               this.initMethod();
       },
       watch: {
           // 監聽info對象，如果info的值變更了，則觸發
           Info: {
               handler (newValue, oldValue) {
                    this.initMethod();
               },
               deep: true
           },
           // 也可以通過computed從而監聽對象中具體某個屬性
           watchInfo(newValue, oldValue) {
           	this.initMethod();
           }
       }
   }