Two Way Binding Bootstrap-Vue Tables

Question

I am trying to use two way data binding using v-model on bootstrap-vue table. But the value on the table does not change when the value changes.

I try to change data with a input text.

<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>

given value from form input changes the span text but does not change b-table value?

It's because the value property of the first object in the items array is initialized with this.value, but updating this.value does not automatically update the items[0].value string. — thibautg
Use <b-form-input v-model="items[0].value"></b-form-input> — thibautg
Can i ask what it is you're trying to attempt? For me it doesn't really make sense to use a table if you only have one item — Hiws
@Hiws it is not one item more like trying to create a table with a response from a web service, every change in input it makes request from a restful web service and it returns a series of data. I made it one item to simplify the question. — MertTheGreat

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2019-09-15T16:24:12

You should use items prop instead of v-model directive :

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

b-table items prop is one way binding.

You should use watch property in order to make that reactive :

 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])

    }
  }
  }

Two Way Binding Bootstrap-Vue Tables

1 Answers