Currently, I am working on a component using vue.js and facing a slight issue. The component has a wide range of parameters, so to keep things organized, I opted for the approach outlined below:
<script type="text/javascript">
Vue.$noClientConf = {
'cmp_name': 'NoClient',
'cmp_title': 'Selection du client',
'url': 'ajax/getclients.php',
'parent': null,
'opt_texte': 'NomClientFR',
'opt_valeur': 'NoClient',
'cmp_max_options': 3,
'opt_custom': null,
'data_size': 10,
'data_style': 'btn btn-default btn-sm',
'data_live_search': 'true'
};
</script>
<div id="app">
<div class="col-lg-2">
<flex-select ref="NoClient" :conf="Vue.$noClientConf"></flex-select>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{Vue}
});
</script>
In essence, I create an object with the necessary parameters and pass it to my component. However, I would like to set default values for some of these parameters to simplify the process for users.
I have researched Vue.js props validation and believe it aligns well with my goals. However, it appears that while you can validate if a prop is an object, you cannot validate its structure. For instance, I wish to achieve something like:
props: {
config.cmp_name: {
type:String,
required: true
},
config.cmp_title:{
type:String,
required: true
}
}
So my query is essentially... is there a way to accomplish the above?