Компонент внутри v-html или массива элементов данных - PullRequest
Новая
       18

Компонент внутри v-html или массива элементов данных

0 голосов
/ 29 мая 2019

Я разрабатываю компонент таблицы vue, у которого есть возможность добавлять или удалять строки внутри этого компонента таблицы.Вот шаблон для этого компонента.И я хочу, чтобы у каждого столбца модели было поле ввода автозаполнения.Для автозаполнения я использую компонент автозаполнения внутри моего компонента таблицы. 

<template>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th v-for="(column, index) in columns" :key="index"> {{column}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in items" :key="index">
                    <td
                        v-for="(column, indexColumn) in columns"
                        :key="indexColumn"
                        v-html="item[column]"
                    />
                </tr>
            </tbody>
        </table>
        <div>
            <div class="row">
                <div class="col-md-12">
                    <button v-on:click.self="addRow" type="button" class="js-add-table-row btn btn-success btn-wide font-weight-bold text-uppercase" style="width: 100%">Add Row</button>
                </div>
            </div>
        </div>
    </div>
</template>

В моем компоненте таблицы я хочу использовать другой компонент.Автозаполнение компонента.Я импортирую автозаполнение из vuejs-auto-complete.

У меня вопрос.Как я могу использовать этот компонент Autocomplite внутри моей строки в столбце модели?

Можно ли использовать элемент компонента 

<autocomplete
  :source="[{id:1,name:'abc'},{id:2,name:'def'}]">
</autocomplete>

внутри столбца модели элементов данных или связать с v-html или каким-либо другим решением?

<script>
    import Autocomplete from 'vuejs-auto-complete'

    export default {
        name: "acp-bucket-table",
        components: {
            'autocomplete': Autocomplete
        },
        data() {
            return {
                items: [
                    {
                        'id':'1',
                        'model': '<input type="text" class="js-autocomplete form-control" placeholder="Enter article name">',
                        'description': '<input type="text" class="form-control">',
                        'remove': '<button type="button" class="btn btn-light btn-elevate-hover btn-circle btn-icon"><i class="flaticon2-trash"></i></button>'
                    },
                ],
                columns: [
                    'id',
                    'model',
                    'description',
                    'remove'
                ]
            }
        },
        methods: {
            addRow(){
                this.items.push(
                    {
                        id: this.items.length + 1,
                        model: '<input type="text" class="form-control" placeholder="Enter article name">',
                        description: '<input type="text" class="form-control">',
                        remove: '<button type="button"><i class="flaticon2-trash"></i></button>'
                    }
                );
            },
            removeRow: function(event) {},
            calculate(e) {
                console.log('Calculate =>', e);
            }
        }
    }
</script>
...