Vue.js 如何在输入字段上使用v模型和计算属性？

我有一个带有2个输入字段的简单组件：

<template>
    <div>
        <input type="text" v-model="name">
        <input type="text" v-model="alias">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: "",
                alias: ""
            }
        }
    }
</script>

问题是，如果在

名称

字段中键入内容，则

别名

属性中不会获得实际值。我只能直观地看到它，但它没有价值。但是，如果我在

别名

字段中键入，它会得到正确更新

---

我在这里遗漏了什么？我如何才能使它成为我想要的方式？

计算机无法工作，因为它应该被视为不可变的

此外，由于模型会在每次输入时更新，手表也不会工作，它只会拾取输入内容的第一个字符，除非预先填充

我就是这样做的，只需在名称输入上添加一个

@blur

事件，然后触发一个方法，如果alias为空，则填充alias，如果alias为空，则触发alias

如果您预先填充模型，或者您可以观看，那么在mounted中也可以使用相同的方法

{
  template: `
  <div>
     <input type="text" v-model="name" @blur="setAlias()">
      <input type="text" v-model="alias" @blur="setAlias()">
  </div>
  `,
  data() {
    return {
      name: '',
      alias: ''
    }
  },
  methods: {
    setAlias() {
      if (this.alias === '') {
        this.alias = this.name
      }
    }
  }
}

{
模板：`
`,
数据（）{
返回{
名称：“”，
别名：“”
}
},
方法：{
setAlias（）{
如果（this.alias==''）{
this.alias=this.name
}
}
}
}

Computed将不起作用，因为它应该被视为不可变的

此外，由于模型会在每次输入时更新，手表也不会工作，它只会拾取输入内容的第一个字符，除非预先填充

我就是这样做的，只需在名称输入上添加一个

@blur

事件，然后触发一个方法，如果alias为空，则填充alias，如果alias为空，则触发alias

如果您预先填充模型，或者您可以观看，那么在mounted中也可以使用相同的方法

{
  template: `
  <div>
     <input type="text" v-model="name" @blur="setAlias()">
      <input type="text" v-model="alias" @blur="setAlias()">
  </div>
  `,
  data() {
    return {
      name: '',
      alias: ''
    }
  },
  methods: {
    setAlias() {
      if (this.alias === '') {
        this.alias = this.name
      }
    }
  }
}

{
模板：`
`,
数据（）{
返回{
名称：“”，
别名：“”
}
},
方法：{
setAlias（）{
如果（this.alias==''）{
this.alias=this.name
}
}
}
}

首先，计算属性和数据属性不能同名。由于计算属性和数据属性最终都作为同一状态对象上的属性，因此一个属性将覆盖另一个属性

其次，我认为您这样做是因为第一点，在您计算的

别名

getter中，您再次引用了

别名

，它本质上是引用自身，看起来可能会给出一些不一致的返回值

我可以想出两种解决你问题的办法：

1）在

名称上使用观察者：

为
名称
创建一个观察函数，当
别名
为空时，或者如果它与以前的名称值相同，则将
此.alias
设置为与
名称
相同的值


导出默认值{
数据：（）=>({
姓名：“，
别名：“
}),
观察：{
名称（新值、旧值）{
如果（！this.alias | | this.alias==oldVal）{
this.alias=newVal；
}
}
}
}

2）对名称输入使用显式
：value
和
@change
/
@keyup
绑定：

v-model
是一种方便的方法，可以为您设置这两个属性，但在您的情况下，您需要在更改处理程序中执行更多的逻辑，只需设置状态属性值


导出默认值{
数据：（）=>({
姓名：“，
别名：“
}),
方法：{
//检查并设置名称输入事件的两个值
onNameInput（e）{
如果（！this.alias | | this.alias===this.name）{
this.alias=e.target.value；
}
this.name=e.target.value；
}
}
}
首先，计算属性和数据属性不能同名。由于计算属性和数据属性最终都作为同一状态对象上的属性，因此一个属性将覆盖另一个属性

其次，我认为您这样做是因为第一点，在您计算的
别名
getter中，您再次引用了
别名
，它本质上是引用自身，看起来可能会给出一些不一致的返回值

我可以想出两种解决你问题的办法：

1）在
名称上使用观察者：

为
名称
创建一个观察函数，当
别名
为空时，或者如果它与以前的名称值相同，则将
此.alias
设置为与
名称
相同的值


导出默认值{
数据：（）=>({
姓名：“，
别名：“
}),
观察：{
名称（新值、旧值）{
如果（！this.alias | | this.alias==oldVal）{
this.alias=newVal；
}
}
}
}

2）对名称输入使用显式
：value
和
@change
/
@keyup
绑定：

v-model
是一种方便的方法，可以为您设置这两个属性，但在您的情况下，您需要在更改处理程序中执行更多的逻辑，只需设置状态属性值


导出默认值{
数据：（）=>({
姓名：“，
别名：“
}),
方法：{
//检查并设置名称输入事件的两个值
onNameInput（e）{
如果（！this.alias | | this.alias===this.name）{
this.alias=e.target.value；
}
this.name=e.target.value；
}
}
}
不确定这一点被接受的原因，您的两个示例都不是op要求的，如果相同，第一个示例会追加，第二个根本不起作用，而我的答案很完美