Bootstrap 复选框未更新计算属性

发布于 2025-01-21 00:06:14 字数 1351 浏览 0 评论 0 原文

我正在尝试创建一个选择所有复选框的复选框。

我有一系列对象。每个对象内部都有一个允许的值。其中说明复选框是否处于活动状态。该数组来自一个计算属性,该属性从我商店中的 getter 获取数据。

我创建了一个复选框,当它被选中时,它会改变我的状态。状态正在更新,但我的模板没有呈现正确的值。

我可以在 Vue 控制台中看到状态正在更新,并且在计算属性的 console.log() 中看到。

我希望计算的属性显示为正确的数据。我尝试将所有内容移至方法并调用该方法,但它仍然没有显示。当我理解 Vue 文档时。如果值更新,计算的 props 也应该更新。

我的模板怎么没有更新?我该如何更新它?

模板

<b-form-checkbox
   v-model="allSelected"
   :indeterminate="indeterminate"
   @change="toggleAll"
>Select All

</b-form-checkbox>
   <b-row>
    <b-col v-for="cat in categories" :key="cat.id" sm="12" md="6" lg="4">
      <b-form-checkbox
        
        :value="cat"
        v-model="cat.allowed"
      />
      <span>{{ cat.name }}</span>
    </b-col>
  </b-row>


  computed: {
    ...mapGetters("categories", ["customerCategories"]),

  categories() {
   return this.customerCategories;
  },

},

  methods: {
    ...mapActions("categories", ["updateToggle"]),

   toggleAll() {
    this.updateToggle(this.allSelected);
   },
  }

....商店

  updateToggle({ commit }, data) {
    commit("isCategoriesActive", data);
  }

    isCategoriesActive: (state, value) =>
      (state.list = state.list.map(cat => {
      cat.allowed = value
    return cat
   })),

I'm trying to create a checkbox that selects all checkboxes.

I have an array of objects. Inside each object is a allowed value. Which states if a checkbox is active. The array is coming from a computed propertie which is getting the data from a getter in my store.

I have created a single checkbox and when it's selected it mutates my state. The state is getting updated, but my template isn't rendering the correct value.

I can see in my Vue console the state is being updated and in the console.log() in the computed properties.

I want the computed properties to display to correct data. I've tried moving everything to a method and calling the method, but it still isn't showing. When i'm understand of the Vue docs. Computed props should update if a value is updated.

How is it that my template isn't updating? and how can I update it?

template

<b-form-checkbox
   v-model="allSelected"
   :indeterminate="indeterminate"
   @change="toggleAll"
>Select All

</b-form-checkbox>
   <b-row>
    <b-col v-for="cat in categories" :key="cat.id" sm="12" md="6" lg="4">
      <b-form-checkbox
        
        :value="cat"
        v-model="cat.allowed"
      />
      <span>{{ cat.name }}</span>
    </b-col>
  </b-row>


  computed: {
    ...mapGetters("categories", ["customerCategories"]),

  categories() {
   return this.customerCategories;
  },

},

  methods: {
    ...mapActions("categories", ["updateToggle"]),

   toggleAll() {
    this.updateToggle(this.allSelected);
   },
  }

....store

  updateToggle({ commit }, data) {
    commit("isCategoriesActive", data);
  }

    isCategoriesActive: (state, value) =>
      (state.list = state.list.map(cat => {
      cat.allowed = value
    return cat
   })),

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

摇划花蜜的午后 2025-01-28 00:06:14

使用 v-Model 参考计算 getter/setter: Playground

您需要更改的唯一内容是:

  1. 存储的cats数组是在哪里存储的getter/setter
  2. cats数组在计算 allsected
<script>
export default({
  data () {
    return {
      cats: [
        { name: "one", allowed: false},
        { name: "two", allowed: false},
        { name: "three", allowed: false},
        { name: "four", allowed: false},
        { name: "five", allowed: false}
      ]
    }
  },
  computed: {
    allSelected: {
      get () {
        return this.cats.every(cat => cat.allowed)
      },
      set (value) {
        this.cats.map(cat => cat.allowed = value)
      }
    }
  }
})
</script>

<template>
allSelected: <input type="checkbox" v-model="allSelected" />
  <hr />
  <template v-for="cat in cats" :key="JSON.stringify(cat)">
  <div>
    {{cat.name}} : <input type="checkbox" v-model="cat.allowed" />
    </div>
  </template>
</template>

Check out this solution, with v-model reference to a computed getter/setter: Playground

The only thing from my example you need to change is:

  1. Where the cats array is stored
  2. getter/setter in the computed allSelected
<script>
export default({
  data () {
    return {
      cats: [
        { name: "one", allowed: false},
        { name: "two", allowed: false},
        { name: "three", allowed: false},
        { name: "four", allowed: false},
        { name: "five", allowed: false}
      ]
    }
  },
  computed: {
    allSelected: {
      get () {
        return this.cats.every(cat => cat.allowed)
      },
      set (value) {
        this.cats.map(cat => cat.allowed = value)
      }
    }
  }
})
</script>

<template>
allSelected: <input type="checkbox" v-model="allSelected" />
  <hr />
  <template v-for="cat in cats" :key="JSON.stringify(cat)">
  <div>
    {{cat.name}} : <input type="checkbox" v-model="cat.allowed" />
    </div>
  </template>
</template>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文