Неизвестный пользовательский элемент и директива - PullRequest
Новая
       7

Неизвестный пользовательский элемент и директива

0 голосов
/ 27 декабря 2018

Я (все еще изучаю Vue и) пытаюсь создать динамическую таблицу с Vue2 с помощью селектора продукта (компонент Select2), некоторых налоговых расчетов (методов) и нескольких правил для форматирования ввода (Inputmask).

Все работает нормально, только смешанные подкомпоненты и директивы не работают должным образом.

Я использую Webpack, поэтому все компоненты / директивы импортируются.Это запись 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,
    ....
}
});

Здесь у меня есть компонент DynamicTables. 

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);
        }
    }
};

А это часть встроенного шаблона 

...
<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>
...

В настоящее времяя получил следующие ошибки - оба в компоненте DynamicTables:

  • Неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name».

  • Не удалось разрешить директиву: десятичная маска

И компонент, и директивапрекрасно работает в других местах (не смешанных с другими компонентами), но по моей логике они должны работать так, как они живут / существуют в одном и том же экземпляре Vue.Спасибо!

1 Ответ

0 голосов
/ 27 декабря 2018

Вы должны зарегистрировать их глобально, чтобы использовать их повсюду в вашем приложении: 

import DecimalMask from './directives/inputmask/decimal-mask';
Vue.directive('decimal-mask',DecimalMask);
....
import customComponent from './Components/customComponent.vue'
Vue.component('custom-component',customComponent);
...
new Vue({...})
...