Динамически добавляя элементы в vue.js

tl; dr: Я создаю таблицу с редактируемыми ячейками, подобными изображенной на рисунке ниже. У меня есть так, что ячейки доступны для редактирования и общие обновления, но я изо всех сил пытаюсь выяснить, какой процесс мне нужно выполнить, чтобы на самом деле добавить новые строки и столбцы.Динамически добавляя элементы в vue.js

Все клетки, за исключением общей сложности являются изменяемыми конечным пользователем, например, клетки [ex1] [элемент1] может быть изменен от 100 до 150, который затем вызывает событие, которое будет обновлять что общий для этой строки от 320 до 370.

Изначально я определяю основной шаблон в HTML-файле ...

<div class="container" id="app"> 

    <script type="text/x-template" id="datagrid-template"> 
     <table class="table-striped"> 
      <thead> 
       <headerrow v-bind:columns="columns"></headerrow> 
      </thead> 

      <tbody> 
      <datarow v-for="row in rows" v-bind:columns="columns" v-bind:data="row"></datarow> 
      </tbody> 
     </table> 
    </script> 

    <div class="row"> 
     <div class="col-sm-10"> 
      <datagrid v-bind:columns="columns" v-bind:data="rows"></datagrid> 
     </div> 
     <div class="col-sm-2"> 
      <div class="row"> 
       <button type="button" v-on:click="addColumn()">Add Column</button> 
      </div> 
      <div class="row"> 
       <button type="button" v-on:click="addRow()">Add Row</button> 
      </div> 
     </div> 
    </div> 
</div>

в файле JS I инициализация основного элемента Vue как таковые ...

var app = new Vue({ 
    el: "#app", 
    data: { 
    categories: [...], 
    companies: [...] 
    }, 
    methods: { 
    addRow: function() { 
     console.log(this.$children[0]); 
    }, 
    addColumn: function() { 
     this.$children[0].columns.push({value: 'test'}); 
    } 
    } 
});

то у меня есть 6 основных различных типов компонентов:

DataInput (общий вход ячейки)
dataheader (расширяет DataInput)
Datacell (расширяет DataInput)
baserow (строку в таблицы)
headerrow (удлиняет базовую колонну, состоящую из данных головных устройств)
datarow (e xtends baserow, состоящий из datacells)

добавить строку и клетки через как таковой

baserow

var baseRow = { 
    render: function(createElement) { 
    return createElement('tr', {}, this.getProps(createElement)); 
    }, 
    props: {...} 
    } 
};

headerrow

Vue.component('headerrow', { 
    mixins: [baseRow], 
    methods: { 
    getProps: function(createElement) { 
     var comps = []; 
     this.$options.propsData.columns.forEach(function(el) { 
     comps.push(createElement('dataheader', { 
      props: {...} 
     })); 
     }); 
     return comps; 
    } 
    } 
});

При нажатии добавить столбец, я могу увидеть, что 'test' добавляется в co lumns prop при просмотре <datagrid> с использованием расширения chrome. Кроме того, я вижу, что «тест» добавляется в опору столбцов <headerrow>, но ничто в пользовательском интерфейсе никогда не генерируется. Я предполагаю, что это результат того, как я изначально представляю строки и столбцы, и что у меня просто есть какое-то фундаментальное недоразумение ... Может ли кто-нибудь указать какое-то направление в отношении того, что и где я ошибаюсь?

источник

2016-11-15 kyle

-1

Вы не можете ничего, кроме <tr> в пределах <tbody> использования. Вы можете использовать директиву Vue is добавить другие компоненты там:

<tbody> 
    <tr is="datarow" v-for="row in rows" v-bind:columns="columns" v-bind:data="row"></tr> 
</tbody>

источник

2016-11-15 22:30:50 Jeff

Я ценю ответ, но datarow - это tr. Посмотрите на раздел baserow моего вопроса, я обрабатываю его через createElement ('tr', {}, this.getProps (createElement)) ;. – kyle

datarow - это '' ПОСЛЕ Vue анализирует шаблон и создает его. DOM выбрасывает что-либо внутри '', что не является «», прежде чем это произойдет. Эта же проблема возникнет с '' внутри '' – Jeff

Вы ссылаетесь на это? https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats Это заставляет звучать так, как если бы шаблон внутри

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

var baseRow = { 
    render: function(createElement) { 
    return createElement('tr', this.createCells(createElement)); 
    }, 
    props: { 
    initColumns: { 
     type: Array, 
     default: [] 
    }, 
    initData: { 
     type: Object, 
     default: null 
    } 
    }, 
    data: function() { 
    return { 
     columns: this.initColumns, 
     data: this.initData 
    } 
    } 
};

Затем добавить элемент из главного объекта Вью (который содержит компонент строки) можно назвать что-то похожее на this.columns.push({value: 'test'});. Это обновит атрибут данных столбцов и также обновит пользовательский интерфейс.

По моему мнению, это результат реквизита, имеющего one-way data flow, тогда как свойство данных является реактивным, что обесценивается в this section of the docs.

источник

2016-11-16 17:36:55 kyle

Динамически добавляя элементы в vue.js

ответ

Смежные вопросы