In the process of learning Vue, I am attempting to create a dynamic table using Vue2 with a product selector (Select2 component), tax calculations (methods), and input formatting rules (Inputmask).
Most components are functioning correctly, but mixed sub-components and directives are not working as expected.
I have imported all components/directives in Webpack. Here is the entry JS:
import DecimalMask from './directives/inputmask/decimal-mask';
new Vue({
el: '#vue-app',
components: {
....
'select2-ajax': Select2Ajax,
'select2-simple': Select2Simple,
'dynamic-table': DynamicTable,
},
directives: {
'price-mask': PriceMask,
'decimal-mask': DecimalMask,
'date-mask': DateMask,
....
}
});
This is the DynamicTables component:
export default {
props: {
tableRows: {
type: Array,
default: function(){ return [{}] }
}
},
data: function() {
return {
rows: this.tableRows
}
},
computed: {
total: function () {
var t = 0;
$.each(this.rows, function (i, e) {
t += (e.price * e.qty);
});
return t;
}
},
methods: {
addRow: function () {
try {
this.rows.push({});
} catch (e) {
console.log(e);
}
},
removeRow: function (index) {
if(this.rows.length > 1)
this.rows.splice(index, 1);
}
}
};
And here is the inline-template section:
...
<tr v-for="(row, index) in rows">
<td>
<select2-ajax
inline-template
v-model="row.product_id"
ajax-source="{{ AURL::to('common/product-suggestion') }}">
<select name="product[]" class="form-control">
</select>
</select2-ajax>
</td>
<td>
<input v-decimal-mask class="form-control" name="qty[]" v-model="row.qty" number/>
</td>
<td>
<input v-decimal-mask.price class="form-control text-right" name="price[]" v-model="row.price" number data-type="currency"/>
</td>
<td>
<input v-decimal-mask.price class="form-control text-right" name="total[]" :value="row.qty * row.price" number readonly />
</td>
<td>
<button type="button" class="btn btn-danger col-md-12" @click="removeRow(index)"><i class="fa fa-times"></i></button>
</td>
</tr>
...
Currently encountering errors in the DynamicTables component:
Unknown custom element: - Have you registered the component correctly? For recursive components, ensure to provide the "name" option.
Failed to resolve directive: decimal-mask
The component and directive work perfectly in other instances but for some reason are not functioning when mixed within other components. They should work since they exist in the same Vue instance. Thank you!