计算对象 V 模型在更改后未更新

Question

在我的表单中，我允许用户为每个字段设置不同的语言。我正在使用用于 v 模型的计算属性。更改语言时，我的文本字段没有被清除。

这是我所说的一个例子：https://jsfiddle.net/eonq472a/

var vm = new Vue({
    el: "#app",
  computed: {
    dataObject() {
      return {
        first_name: {
          en: '',
          es: ''
        }
      }
    }
  },
  data: {
    language: 'en',
    languageItems: [
        {
        text: 'English',
        value: 'en'
      },
      {
        text: 'Spanish',
        value: 'es'
      }
    ]
  }
});

尝试在语言为英语时在文本字段中输入一些内容，然后将语言更改为西班牙语。旧的英文文本将保留。清除文本的唯一方法是多次更改语言。

注意：我使用的是计算属性，因为在我的实际代码中，我依靠 3 次 ajax 调用来获取我的数据来创建计算对象。

Answer 1

对我来说，您似乎正在尝试将 computet 属性用作 v-model，而我认为这是不可能的。 first_name 对象必须在数据部分中。

var vm = new Vue({
    el: "#app",
    data() {
      return {
        language: 'en',
        first_name: {
          en: '',
          es: ''
        },
        languageItems: [
          {
            text: 'English',
            value: 'en'
          },
          {
            text: 'Spanish',
            value: 'es'
          }
        ]
      }
    }
 });

https://jsfiddle.net/5w9n8j13/

如果您现在输入一个值并更改语言，它将保存在所选语言下。

Answer 2

*编辑 - 重新阅读您的问题并再次查看小提琴。您的问题与 v-model 或计算无关。

您需要将 :key="language" 添加到您的名称组件中。 Vue 不知道它需要重新渲染该组件，因为默认情况下它不会监视语言变量。通过添加键，您可以告诉它该变量何时更改为重新渲染，然后将您的 [语言] 调用移动到备用语言。

<v-text-field v-model="dataObject.first_name[language]" label="First name" :key="language"></v-text-field>

---

Computed 用于对数据进行一些计算，并在计算/操作/修改后返回结果。它实际上并不将数据存储为独立的项目。通常，这将与 Vuex 存储或类似的存储一起使用，其中数据存储在其他地方，您不希望在任何地方都键入 this.$store.state.module.name。这将允许您获取和设置长格式版本并在本地使用name

我制作了一个基本的小提琴，它将展示如何在 v-model 中使用计算值，但您可以看到计算属性正在设置和检索一个单独存储的变量以便工作。

https://jsfiddle.net/goofballtech/s3xkzh2f/7/

<div id="app">
  <input type="text" v-model="name">
  {{name}}
</div>

new Vue({
  el: "#app",
  data: {
    nameStore: ''
  },
  computed: {
    name: {
      get() {
        return this.nameStore
      },
      set(value) {
        this.nameStore = value
      },
    },
  },
  methods: {}
})

您可以看到计算值中有一个 getter 和一个 setter。一个更新占位符变量，另一个检索占位符值，然后将其返回到调用变量的位置。