Vue.js reported an error. The details are as follows.

specific errors are as follows:

vue.esm.js?65d7:434 [Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, got String.

found in

---> <MtChecklist>
       <MtPopup>
         <Finish> at E:\Caqm\app\src\components\Finish.vue
           <App> at E:\Caqm\app\src\App.vue
             <Root>
             

the code is as follows:

<template>
    <div class="page-field">
        <CaqmHeader title=""/>
        
    <div class="main_content">
          <div class="page-part">
            <mt-field label=""  placeholder="" 
            type="text" @click.native="workerClick" v-model="workersIds">
            </mt-field>
      <mt-popup v-model="membersDisplay" position="bottom" class="mint-popup-4">
         <mt-checklist
                title=""
                align="left" 
                v-model="membersValue"
                :options="membersOptions" @change="membersChange">
           </mt-checklist>
        </mt-popup>
      </div>
     </div>
    </div>
</template>

<script>
    import CaqmHeader from "../components/common/CaqmHeader"
 
    export default {
      data(){
          return{
      membersDisplay : false,
      workersIds : "",
      membersValue : "",
      membersOptions:[],
      
     }
       },
      methods:{
   
   //
      workerClick() {
    
    },
    membersChange(){

    }
    
    },

    components: {
     CaqmHeader
      },
  
    }
</script>

<style scoped>
.button_right{
  position: absolute;
  right: 0;
}
.confirm_btn {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.main_content{
  overflow: scroll;
  width: 100%;
  bottom: 56px;
}
.mint-popup-4{
    width: 100%;
}

</style>
Mar.14,2021

type check failed for prop "value". Expected Array, got String.

prop expects to pass in an array, but passes in a string. Wrong type, roughly meaning


visually observe this error, membersValue should bind an array, you bind a string. It's just inferred from your code. You're using mint-ui. Just go to the official website and have a look at demo


membersValue: []

@ Timmy the first floor correct solution. Look at the data type you passed in.


prop "value" expects to receive an array, but gets a string. The
component sets the expected data type for the prop when it is defined.
you need to check the data type of membersValue .


error is obvious. The expected value passed in is array,. If you pass in string, you can modify the type, because if props sets the type, it will do type verification


.

I also encountered the same situation, entangled for more than an hour, summed up as follows:

[conclusion] check the select: attributes multiple and v-model is an array must have at the same time!

v-model is not defined as an array + attribute is set to multiple, and
v-model is defined as an array + attribute is not set to multiple!

Menu