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

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

15.09.2019 07:19:33 Просмотров 43 Источник

Я пытаюсь использовать двустороннюю привязку данных с помощью 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?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables#comment102305711_57945982
@thibautg у вас есть идея, как это работает?
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables#comment102310521_57945982
Могу я спросить, что вы пытаетесь сделать? Для меня это действительно не имеет смысла использовать таблицу, если у вас есть только один элемент
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables#comment102311213_57945982
@Hiws это не один элемент больше похож на попытку создать таблицу с ответом от веб-службы, каждое изменение ввода он делает запрос от restful веб-службы и возвращает ряд данных. Я сделал это одним пунктом, чтобы упростить вопрос.

Ответы - Двусторонняя Привязка Bootstrap-Vue Таблиц / Two Way Binding Bootstrap-Vue Tables

Является ответом!
Boussadjra Brahim

15.09.2019 07:24:12

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

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

b-tableэлементов 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])

    }
  }
  }
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102305621_57946025
Это дает ошибку компиляции, так как я использую :items="items" в течение двух раз.
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102305659_57946025
ах ок, я сделал ошибку, дублируя пункты проп
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102305679_57946025
О да. Но, к сожалению, <b-table striped="" hover="" :fields="fields" :items="items"></b-table> не работает. Это ничего не меняет.
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102305713_57946025
пожалуйста, проверьте мой отредактированный ответ
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102305888_57946025
Спасибо за ваш ответ, но где вы cal value (newVal) функция?
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102305921_57946025
не нужно называть его, Узнайте больше о наблюдателях здесь
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102305943_57946025
это означает, что вы наблюдаете любое изменение в свойстве value, а затем продолжаете, если есть какие-либо изменения
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102305960_57946025
Это на тебя действует? Я должен делать что-то работать.
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102306121_57946025
Да он отлично работает для меня проверьте эту ручку
https://stackoverflow.com/questions/57945982/two-way-binding-bootstrap-vue-tables/57946025#comment102306159_57946025
Спасибо, это действительно работает.
Закрыть X