javascript - Vuejs - 将计算属性分配给数据()

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 data() 属性如果 getStudent.name 不存在？我试过:

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

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

'v-model' directives require the attribute value which is valid as 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 元素 本身中将值与输入更改处理程序分开，在这种情况下，您将使用已设置的 getter

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

最后，如果你真的需要使用两个不同的属性，你可以在 created/activated Hook 上设置它们(并回答你原来的问题):

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

虽然你总是需要将更新委托(delegate)给商店，所以我要么使用 get/set 计算属性，要么使用值/更新分离