vue中v-model绑定计算属性

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

使用场景

v-model本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；通常情况下v-model绑定的都是data属性中声明的变量，但是处理这些变量外，怎么绑定计算属性呢？

什么是计算属性

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。说白了就是，一个变量的值, 需要用另外变量计算而得来。

假设现在有个设置语言的功能，需要同时保存中英文数据，这个该如何实现？

通过普通方法实现

如果通过多个输入框实现，就不需要那么复杂，如下图，完整代码：

<template>
  <section>
    <el-form ref="formInfo" :model="formInfo" label-width="80px">
      <el-form-item label="选择语言">
        <el-checkbox-group v-model="formInfo.lang">
          <el-checkbox label="中文" value="cn" name="type"></el-checkbox>
          <el-checkbox label="英文" value="en" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="名称-中文">
        <el-input v-model="formInfo.name.cn"></el-input>
      </el-form-item>
      <el-form-item label="名称-英文">
        <el-input v-model="formInfo.name.en"></el-input>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
export default {
  data() {
    return {
      // 表单信息
      formInfo: {
        lang: ["cn", "en"],
        name: {
          cn: "",
          en: "",
        },
      },
    };
  },
};
</script>

通过计算属性

接下来我们看一下通过一个输入框和计算属性如何实现？如下图，完整代码：在线运行

<template>
  <section>
    <el-form ref="formInfo" :model="formInfo" label-width="80px">
      <el-form-item label="选择语言">
        <el-select v-model="formInfo.langSel" placeholder="请选择">
          <el-option key="cn" label="中文" value="cn"> </el-option>
          <el-option key="en" label="英文" value="en"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="getLangName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
export default {
  data() {
    return {
      formInfo: {
        langSel: "cn",
        name: {
          cn: "",
          en: "",
        },
      },
    };
  },
  computed: {
    // 双向绑定简介
    getLangName: {
      get() {
        // 获取值
        return this.formInfo.name[this.formInfo.langSel];
      },
      set(val) {
        // 设置新值
        this.formInfo.name[this.formInfo.langSel] = val;
      },
    },
  },
  methods: {
    onSubmit() {
      console.log("submit!", this.formInfo);
    },
  },
};
</script>