时间戳

首页 > 解决方案 > 使用 Vue 对数据进行检查后，无法将复选框设置为未选中状态

vue.js - 使用 Vue 对数据进行检查后，无法将复选框设置为未选中状态

问题描述

我拼命地试图了解那里出了什么问题，但无法弄清楚！我会尽我所能解释，但代码很长，我不能轻易发布。

我有一个名为“FrameHeader”的组件，其中包含一个输入复选框。该组件在另一个名为“Frame”的组件中被调用，并且框架由另一个组件（“FrameContainer”）中的 v-for 制成。

在 FrameHeader 模板中，我有这个：

<input :key="'frame-touchselectbox-'+frameId" type="checkbox" 
  v-model="touchSelected"
  :class="{hidden: !isTouchSelectOn, selectCheckBox: true}"        
/>

touchSelected 是一个计算属性，定义如下：

computed: {        
        touchSelected() {
            console.log("checking frame touch selected for frame " + this.frameId + " ==> " + store.getters.isFrameTouchSelected(this.frameId));
            return store.getters.isFrameTouchSelected(this.frameId);
        },
    },

store.getters.isFrameTouchSelected(this.frameId); 在状态对象中检索名为“touchSelected”的布尔属性：

这个想法是，在我的场景中，所有“touchSelected”属性首先设置为假（A），然后只有一个框架中的一个设置为真（B）。

（一个）：

toggleTouchSelect(state, payload: {frameId: number; toggle: boolean}) {
            const newCandidates: number[] = (payload.toggle) ? getAllSiblings(state.frameObjects, payload.frameId): [];
            Object.keys(state.frameObjects).forEach((frameKey) => {
                Vue.set(
                    state.frameObjects[parseInt(frameKey)],
                    "touchSelected",
                    false
                );
                Vue.set(
                    state.frameObjects[parseInt(frameKey)],
                    "isTouchSelectOn",
                    newCandidates.includes(parseInt(frameKey))
                );
            });
        },

(乙):

touchSelectFrame(state, payload: {frameId: number; isSelected: boolean}) {
            Vue.set(
                state.frameObjects[payload.frameId],
                "touchSelected",
                payload.isSelected
            );
        },

我在商店里得到的数据是正确的，我在我想要的地方得到了假/真值。

但是，复选框不正确。我第一次将框架的一个属性设置为“true”时，会选中相应的复选框。但是当我将另一个框架的属性设置为“true”时，前一个框架的复选框不会被取消选中。实际上，我看到它首先被取消选中，然后再次被选中。

正如我所说，状态中的数据是正确的：即使该复选框恢复为选中状态，该帧数据中的基础属性也是“假”。

但最奇怪的是，如果仅将复选框输入更改为文本输入（更改模板中输入的类型），即使在第二次将框架的属性设置为“true”之后，文本值也始终正确。

所以......我完全困惑，无法理解这些复选框发生了什么。很抱歉解释模糊，我希望它仍然可以理解，并且有人会对此有所了解:) 非常感谢。

标签： vue.jscheckboxv-model

解决方案

默认情况下，计算 props 是 getter-only（参考）。这意味着您的复选框可以读取 的值touchSelected但不能更改其值。您必须使用带有 getter和setter 的计算道具。假设你有一个突变来改变你frameId在 Vuex 中的逻辑：

computed: {        
  touchSelected: {
    get(): {
      return store.getters.isFrameTouchSelected(this.frameId);
    }
    set(newValue): {
      store.commit('FRAME_MUTATION', newValue);
    }
  }
},

推荐阅读