双向绑定 Bootstrap-Vue 表格

Question

我正在尝试在 bootstrap-vue table 上使用 v-model 进行双向数据绑定。但是 table 上的值在值更改时不会更改。

我尝试用输入文本更改数据。

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

Answer 1

您应该使用 items 属性而不是 v-model 指令：

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

b-table items 道具是一种绑定方式。

您应该使用 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])

    }
  }
  }

双向绑定 Bootstrap-Vue 表格

Two Way Binding Bootstrap-Vue Tables

twitter-bootstrap

vue.js

vue-component

vuejs2

two-way-binding