Двусторонняя привязка таблиц Bootstrap-Vue

Я пытаюсь использовать двустороннюю привязку данных с использованием v-модели в таблице bootstrap-vue. Но значение в таблице не меняется при изменении значения.

Пытаюсь изменить данные вводимым текстом.

<template>
    <b-table striped hover :items="items" :fields="fields" v-model="items"></b-table>

    <span>The Value: {{value}} </span>
    <b-form-input v-model="value"></b-form-input>
</template>

<script>
  export default {
    data() {
      return {
        value = '',
        fields: ['field', 'value',],
        items: [
          { field: 'Field of Value', value: this.value},
        ]
      }
    }
  }
</script>

заданное значение из ввода формы изменяет текст диапазона, но не меняет значение b-table?


vue.js twitter-bootstrap vuejs2 vue-component two-way-binding
person MertTheGreat    schedule 15.09.2019    source источник
comment
Это потому, что свойство value первого объекта в массиве items инициализируется с помощью this.value, но обновление this.value не приводит к автоматическому обновлению строки items[0].value.   -  person thibautg    schedule 15.09.2019
comment
@thibautg у вас есть идея, как с ним работать?   -  person MertTheGreat    schedule 15.09.2019
comment
Используйте 1_   -  person thibautg    schedule 15.09.2019
comment
Могу я спросить, что вы пытаетесь сделать? Для меня не имеет смысла использовать таблицу, если у вас есть только один предмет   -  person Hiws    schedule 16.09.2019
comment
@Hiws это не один элемент, больше похожий на попытку создать таблицу с ответом от веб-службы, каждое изменение во входных данных делает запрос от спокойной веб-службы и возвращает серию данных. Я сделал это одним пунктом, чтобы упростить вопрос.   -  person MertTheGreat    schedule 16.09.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны использовать items prop вместо директивы v-model:

  <b-table striped hover  :fields="fields" :items="items"></b-table>

b-table items prop - односторонняя привязка.

Вы должны использовать свойство watch, чтобы сделать это реактивным:

 export default {
    data() {
      return {
        value : '',
        fields: ['field', 'value',],
        items: [
          { field: 'Field of Value', value: this.value},
        ]
      }
    },
   watch:{
   value(newVal){
   this.items[0].value=this.value;
    this.$set(this.items,0,this.items[0])

    }
  }
  }
person Boussadjra Brahim    schedule 15.09.2019
comment
Это дает ошибку компиляции, поскольку я использую: items = items два раза. - person MertTheGreat; 15.09.2019
comment
ах, хорошо, я сделал ошибку, продублировав опору предметов - person Boussadjra Brahim; 15.09.2019
comment
о, да. Но, к сожалению, ‹b-table striped hover: fields = fields: items = items› ‹/b-table› тоже не работает. Это ничего не меняет. - person MertTheGreat; 15.09.2019
comment
Спасибо за ответ, но где вы вычисляете функцию значения (newVal)? - person MertTheGreat; 15.09.2019
comment
не нужно называть это, узнайте больше о наблюдателях здесь - person Boussadjra Brahim; 15.09.2019
comment
это означает, что вы наблюдаете любое изменение свойства значения, а затем продолжаете, если есть какие-либо изменения - person Boussadjra Brahim; 15.09.2019
comment
Это работает на вас? Я должен что-то делать. - person MertTheGreat; 15.09.2019
comment
Да, у меня все работает, проверьте эту ручку - person Boussadjra Brahim; 15.09.2019
comment
@Boussadjra Brahim, тогда, когда есть несколько строк, я должен определить текущий индекс строки, проверив ‹tr class = b-table-row-selected /›? - person Daniel Yang; 17.06.2021