Javascript Vue中未调用计算属性集

根据文档，只要定义get/set方法，我就应该能够在Vue中使用计算属性作为

v-model

，但在我的情况下，它不起作用：

export default{

    template: `
      <form class="add-upload" @submit.prevent="return false">
        <label><input type="checkbox" v-model="options.test" /> test </label>
      </form>
    `,

    computed: {

      options: {

        get(){
          console.log('get');
          return {test: false};
        },

        set(value){
          console.log('set');
        },

      },

    }

}

导出默认值{
模板：`
试验
`,
计算：{
选项：{
得到（）{
log（'get'）；
返回{test:false}；
},
设置（值）{
console.log（'set'）；
},
},
}
}

显然，当我选中/取消选中输入时，不会调用

set

。

---

但是，当显示组件时，会调用

get

。

我不知道是否有一个计算集方法可以在这里工作，但是有一些其他方法可以解决这个问题

如果希望使用单一的getter来改变数据，可以使用基于事件的方法来设置数据。这种方法是我最喜欢的：

导出默认值{
模板：`
试验
{{options.test}
`,
数据（）{
返回{
选项数据：{
测试：错误
}
}
},
计算：{
选项：{
得到（）{
返回此.options数据；
},
},
},
方法：{
设置选项（选项）{
this.$set（this，“optionsData”，{…this.optionsData，…options}）
}
}
}

如果您在get/set中没有真正执行任何操作，那么可以使用data选项

导出默认值{
模板：`
试验
{{options.test}
`,
数据（）{
返回{
选项：{
测试：错误
}
}
}
}

此外，还可以为每个属性设置get/set选项

导出默认值{
模板：`
试验
{{test}}
`,
数据（）{
返回{
选项数据：{
测试：错误
}
}
},
计算：{
测试：{
得到（）{
返回此.options.data.test；
},
设置（值）{
this.options.data.test=值
}
},
},
}

问题似乎既存在

选项，也存在getter的返回值

你可以试试这个：

let options;

try {
  options = JSON.parse(localStorage.getItem("options"));
}
catch(e) {
  // default values
  options = { test: true };
}

function saveOptions(updates) {
  localStorage.setItem("options", JSON.stringify({ ...options, ...updates }));
}

export default{
  template: `
    <form class="add-upload" @submit.prevent="return false">
      <label><input type="checkbox" v-model="test" /> test </label>
    </form>`,
  computed: {
    test: {
      get() {
        console.log('get');
        return options.test;
      },
      set(value) {
        console.log('set', value);
        saveOptions({ test: value });
      },
    },
  }
}

let选项；
试一试{
options=JSON.parse（localStorage.getItem（“options”）；
}
捕获（e）{
//默认值
选项={test:true}；
}
函数保存选项（更新）{
setItem（“options”，JSON.stringify（{…options，…updates}））；
}
导出默认值{
模板：`
试验
`,
计算：{
测试：{
得到（）{
log（'get'）；
返回选项。测试；
},
设置（值）{
console.log（'set'，值）；
saveOptions（{test:value}）；
},
},
}
}

希望这有帮助。
使用本地数据属性，初始化为目标
本地存储
项，而不是
计算的
getter/setter；以及一个（检测任何子属性上的更改）在更改时设置
localStorage
。这允许您在观察对象子属性的更改时，仍然将
v-model
与本地数据属性一起使用

步骤：

声明一个本地数据属性（名为
options
），该属性初始化为
localStorage
的当前值：
导出默认值{
数据（）{
返回{
选项：{}
}
},
安装的（）{
const myData=localStorage.getItem（'my-data'）
this.options=myData？JSON.parse（myData）：{}
},
}

在数据属性（
options
）上声明一个监视，将
deep=true
和
handler
设置为使用新值设置
localStorage
的函数：
导出默认值{
观察：{
选项：{
深：是的，
处理程序（选项）{
localStorage.setItem（'my-data'，JSON.stringify（选项））
}
}
},
}

编辑：在阅读了您依赖本地存储的评论后，我只能建议您采用Vuex方法并使用持久性库来处理本地存储。（）
这样，您的本地存储将始终链接到您的应用程序，而不必每次都处理getItem/setItem

看看您的方法，我假设您有理由在数据属性上使用计算属性

出现此问题的原因是，您的computed属性返回一个只在
get
处理程序中定义的对象。
无论您尝试什么，您都将无法在
集中操作该对象

必须将
get
和
set
链接到公共引用。正如许多人所建议的那样，数据属性或应用程序中的真实来源（Vuex实例就是一个很好的例子）

这样，您的
v-model
将完美地与计算属性的
set
处理程序配合使用

下面是一把小提琴，演示了这一解释：

用Vuex


const store=新的Vuex.store({
声明：{
//您的选项对象已在存储中预定义，因此Vue已经知道其结构
选项：{
被检查：错误
}
},
突变：{
//指定新值的变异处理程序
setIsCheck（状态、有效负载）{
state.options.isChecked=有效载荷；
}
}
});
新Vue({
店:店,，
el:“应用程序”，
计算：{
选项：{
得到（）{
//在这里，我们返回您的代码片段中描述的options对象
返回此项。$store.state.options；
},
设置（选中）{
//在这里，我们使用输入返回的checked属性，并提交一个Vuex变异，它将变异状态
这是.$store.commit（“setIsCheck”，选中）；
}
}
}
})
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
氢{
字体大小：粗体；
边缘底部：15px；
}

已选中：{{选项。