Hello friends, I have a child component to which I can not access the value of a property that I passed through the props. I have an object arrangement that has two full arrangements inside,
values: {
value1: ['val1', 'val2', 'val3'],
value2: ['val1', 'val2', 'val3'],
}
But when I want to access from the component to the props 'value1' and 'value2' I get an undefined. However I check the Vue Developers Tools and it turns out that the props does have the value that I sent to it, but when I want to access it either from a method or from the hook mounted it throws undefined. Grateful for his help, I do not know what to do and investigated a lot.
This way I put the component in HTML:
<row-data
v-for="(item, index) in titles"
:valor1="values.value1[index]"
:valor2="values.value2[index]"
:key="index"
:title="item.title"
:name1="item.name+'[]'"
:name2="item.name+'2[]'"
@sum1="sumVal1"
@sum2="sumVal2"
></row-data>Now on the javascript side I put the following.
Vue.component('row-data',{
template: '
<div class='row' style="margin-bottom: 0;">
<div class='col s4'>
<p>@{{ title }}</p>
</div>
<div class='col s2'>
<input type='text' :name='name1' v-model="emitir1">
<input type="hidden" name="title1[]" :value="title"/>
</div>
<div class="col s2 center">
<p>@{{ data1 }}</p>
</div>
<div class="col s2">
<input type="text" :name='name2' v-model="emitir2">
</div>
<div class="col s2 center">
<p>@{{ data2 }}</p>
</div>
</div>
',
props: ['title', 'name1', 'name2', 'valor1', 'valor2'],
data: function (){
return {
emitir1: this.valor1,
emitir2: 0,
data1: 0,
data2: 0,
values: {
value1: 0,
value2: 0,
},
}
},
watch: {
emitir1: function(val){
this.data1 = (val * 100 / 159).toFixed(4);
this.$emit('sum1');
},
emitir2: function(val){
this.data2 = (val * 100 / 159).toFixed(4);
this.$emit('sum2');
}
},
});'
'