Vue 和 Vue 多选。制作选项以对所选语言做出反应答案

【问题标题】：Vue and vue-multiselect. Making Options to react to selected languageVue 和 Vue 多选。制作选项以对所选语言做出反应
【发布时间】：2019-11-12 03:12:19
【问题描述】：

我目前正在开发一个支持多种语言的 Vue 网站。所选语言存储在 vuex-store 中，我有这样的计算属性 lang

lang(){
  return this.$store.state.lang
}

现在我在 v-ifs、shows、其他计算属性等中使用这个属性，它工作得很好。只有一件事我遇到了问题，那就是多选 (https://vue-multiselect.js.org/)。计算的选项属性看起来像这样

mappedOptions(){
  return this.options.map(
    (o, ind) => {
      return {name: o.title[this.lang], code: ind}
    }
  );
}

现在的问题是，这不起作用。可能选项正在创建的生命周期挂钩中初始化，因此稍后不会更新。你有什么聪明的想法，我可以通过这个 vue-multiselect 使用多种语言吗？除了这个问题，我非常喜欢这个组件，所以我不想切换。

【问题讨论】：

顺便说一句，“这不起作用”对故障排除没有用处。由于无法看到 options 变量，唯一突出的是o.title[this.lang] 看起来不正确。你确定o.title 是一个键匹配lang 的对象吗？
是的。钥匙是对的。它还可以在创建时正确呈现，只是更改语言的 vuex 存储中的状态，然后不更新多选
好的。有几件事要尝试： 1. 在您的 mappedOptions() 中添加一些虚拟代码以排除 map() 的一些错误：let x = this.lang; console.log(x); 和 2. 也尝试将 mappedOptions 切换到方法。通过切换到一个方法，它会更频繁地运行（因为它没有计算出的魔法），但应该可以工作。

标签： javascript html vue.js vuejs2 vue-multiselect

【解决方案1】：

在多选上添加v-if="computedOption"，应该可以解决问题

【讨论】：

谢谢。目前无法访问我的计算机，但稍后将立即对其进行测试