时间戳

首页 > 解决方案 > Vuejs引导b表数据未加载/更新

vue.js - Vuejs引导b表数据未加载/更新

问题描述

我在 Vue 中有一个对象，其中包含每个用户的字符串键和一个（课程）列表作为我想用来填充 b 表的值。

我想知道是否有办法做到这一点，以便表中的项目是反应性的，即表随着 userCourses 变量中的数据更新而更新。代码的简化版本如下所示：

<div v-for="user in users" v-bind:key="user">
    <b-table :items="userCourses[user]" :fields="courseFields"></b-table>
</div>

userCourses: {
  'userOne': [...],
  'userTwo': [...]
}

标签： vue.jsbootstrap-4bootstrap-table

解决方案

改进示例：

Vue.config.productionTip = false;
Vue.use(BootstrapVue);

new Vue({
  data() {
    return {
      user: null,
      users: ["userOne", "userTwo"],
      userCourses: {
        userOne: [{ c: "Java" }, { c: "PHP" }, { c: "C#" }],
        userTwo: [{ c: "English" }, { c: "Polish" }, { c: "Spanish" }]
      },
      fields: [{ key: "c", label: "Course" }],
      course: "example"
    };
  },
  methods: {
    addCourse() {
      this.userCourses[this.selectedUser].push({ c: this.course });
    }
  },
  computed: {
    selectedUser: {
      get() {
        return this.user || this.users[0];
      },
      set(v) {
        this.user = v;
      }
    }
  }
}).$mount("#app");
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-radio v-for="user in users" v-model="selectedUser" name="selected-user" :key="'u-'+user" :value="user">{{user}}</b-form-radio>
  <b-form-input v-model="course" placeholder="Course name"></b-form-input>
  <b-button @click="addCourse">Add</b-button>
  <div v-for="(courses, user) in userCourses" :key="'c-'+user">
    <strong>{{user}}</strong>
    <b-table :items="courses" :fields="fields"></b-table>
  </div>
</div>

上一个例子：

Vue.config.productionTip = false;
Vue.use(BootstrapVue);

new Vue({
  data() {
    return {
      users: ["userOne", "userTwo"],
      selectedUser: "userOne",
      courseName: "example",
      userCourses: {
        userOne: [{c: "A"}, {c: "B"}, {c: "C"}],
        userTwo: [{c: "X"}, {c: "Y"}, {c: "Z"}]
      }
    };
  },
  methods: {
    addCourse() {
      this.userCourses[this.selectedUser].push({
        c: this.courseName
      });
    }
  }
}).$mount("#app");
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-radio v-for="user in users" v-model="selectedUser" name="selected-user" :value="user">{{user}}</b-form-radio>
  <b-form-input v-model="courseName" placeholder="Course name"></b-form-input>
  <b-button @click="addCourse">Add</b-button>
  <div v-for="user in users" v-bind:key="user">
    <b-table :items="userCourses[user]"></b-table>
  </div>
</div>

推荐阅读