Vuejs - 将计算属性分配给 data()

Question

我有一个输入字段，我想根据条件为空白或填充

• 条件A：新生，空白字段
• 条件 B：现有学生，填充字段

此数据来自data()函数或computed:属性。例如：

data () {
  return {
    studentName: '', // empty student name property (/new student route)
    studentPersonality: ''
  }
},
computed: {
  ...mapGetters({
    getStudent // existing student object (/edit student route)
  })
}

如果我们从/new学生路线到达，我的输入字段应该为空，或者如果我们来自该路线，则使用现有的学生信息填充该字段/edit。

我可以通过分配getStudent.name来填充输入字段，v-model如下所示。

<input type="text" v-model="getStudent.name">

...当然也可以通过分配studentName给 v-model 来清除该字段

<input ... v-model="studentName">

挑战：getStudent.name 如果它存在，我如何使用它，但studentName如果getStudent.name不存在则退回到空白data() 属性？我试过了：

<input ... v-model="getStudent.name || studentName">

...这似乎有效，但显然无效并导致控制台错误

“v-model”指令需要作为 LHS 有效的属性值

我究竟做错了什么？

Answer 1

确实没有必要将input字段注册到 vue 组件中的不同属性。

如果您想要一个也可设置的计算属性，您可以使用 set & get 方法定义它。

computed: {
  student_name: {
    get: function() {
      return this.$store.getters.get_student.name
    },
    set: function(val) {
      this.$store.commit('set_student_name');
    }
  }
}

另一种方法是将值与input element本身的输入更改处理程序分开，在这种情况下，您将在设置时使用 getter

<input type="text" :value="getStudent.name" @input="update_name($event.target.value)">

最后，如果您真的需要使用两个不同的属性，您可以将它们设置在created/activated钩子上（并回答您的原始问题）：

created: function() {
  this.studentName = this.getStudent
},
activated: function() {
  this.studentName = this.getStudent
}

你总是需要将更新委托给商店，所以我要么使用 get/set 计算属性，要么使用 value/update 分离