Переменные, привязанные к полям b-таблицы

В последнее время я столкнулся с проблемой с таблицей bootstrap-vue и ее элементами. Я сделал таблицу с объектом items. У меня также есть пара переменных, которые я хотел бы включить в элементы таблицы. Я хочу использовать переменные в качестве v-модели входов флажков в шаблоне таблицы для этого слота элемента.

Я попытался поместить переменную как элемент. Переменная просматривалась таблицей, но не была привязана к ней, поэтому любое изменение флажка не отражалось в значениях переменных.

Код, который, как я ожидал, сработает. Таблица с шаблоном и вводом флажка с v-моделью в переменную данных компонента:

<b-table class="settings-integrationsTable" outlined :items="integrationsTableItems()" :fields="print_integrations_fields">
   <template v-slot:cell(switch)="data">
      <b-form-checkbox type="checkbox" 
       v-model="data.item.model">
      </b-form-checkbox>
   </template>
</b-table>

data () {
   return {
      variable: false
   }
}
methods: {
   integrationsTableItems () {
      return {
         { model: this.variable },
      }
   }
}

Я хотел бы поместить переменную непосредственно в элементы, как показано выше, и использовать ее и привязать к моей v-модели ввода таблицы.

Мой обходной путь для этой ситуации заключается в том, что вместо прямой переменной мое поле модели элементов представляет собой строковое имя, например. 'переменная', и я создал метод для возврата ее значения. Я использую значение для представления отмеченного состояния флажка, а второй метод меняет его состояние.

<template v-slot:cell(switch)="data">
   <b-form-checkbox type="checkbox" 
   :checked="getIntegrationModel(data.item.model)"
   @change="changeIntegrationModel(data.item.model)">
   </b-form-checkbox>
</template>

Каким-либо образом сработает моя первая идея? Я могу сделать что-то не так.


bootstrap-vue
person Niko Valaday    schedule 09.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Две проблемы:

methods: {
   integrationsTableItems () {
      return {
         { model: this.variable },
      }
   }
}

Должно быть:

methods: {
   integrationsTableItems () {
      // b-table expects an array of items, not an object
      return [
         { model: this.variable },
      ]
   }
}

Вторая проблема заключается в том, что вы передаете значение this.variable в свои элементы, а не реактивный метод получения / установки, связанный с данными вашего компонента. Обновление поля model элемента приведет к обновлению только его значения в объекте элемента, но не значения в данных.

Если в данных есть только одна переменная, выполните следующие действия:

<b-table class="settings-integrationsTable" outlined :items="integrationsTableItems()" :fields="print_integrations_fields">
   <template v-slot:cell(switch)="data">
      <!-- "model" will point to this.model (your data) -->
      <b-form-checkbox type="checkbox" v-model="model">
      </b-form-checkbox>
   </template>
</b-table>

Обновление (2019-10-10):

Чтобы разместить геттер / сеттер в данных ваших элементов (для свойства элемента model):

   integrationsTableItems () {
      return [
         {
           model: {
             get() => {
               return this.variable
             },
             set(val) => {
               this.variable = val
             }
           }
         },
      ]
   }
person Troy Morehouse    schedule 09.10.2019
comment
Первый - да, знаю. Виноват. Конечно, должен быть массив, но это не моя тема. Во-вторых, да, я знаю, что передаю значение this.variable элементам, и мой вопрос заключается в том, как передать ему весь реактивный геттер / сеттер. В данных есть пара переменных, которые я хочу передать элементам. - person Niko Valaday; 10.10.2019
comment
Извини за поздний ответ. Спасибо за обновление, но это еще не то, что мне нужно. Это, конечно, сработает, но дело в том, что эти переменные определяются индивидуально в другом месте, и в этом представлении я просто использую их после импорта. Ваше исправление было бы подходящим для 1-2 переменных, но слишком длинным для 10 или более переменных, как в моем случае. - person Niko Valaday; 22.10.2019