Vuejs - 将计算属性分配给 data() [英] Vuejs - Assign computed properties to data()

问题描述

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

I have an input field that I would like to either be blank or populate depending on the condition

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

• Condition A: new student, blank field
• Condition B: existing student, populated field

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

This data is coming from the data() function or a computed: property. For example:

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

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

My input field should either be blank if we are arriving from the /new student route, or populate the field with the existing student info, if we're coming from the /edit route.

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

I can populate the input field by assigning getStudent.name to v-model as shown below.

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

...当然也可以通过将 studentName 分配给 v-model

...and of course clear the field by instead assigning studentName to v-model

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

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

Challenge: How can I use getStudent.name IF it exists, but fall back on the blank studentName data() property if getStudent.name does NOT exist? I have tried:

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

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

...which seemed to work, but apparently invalid and caused console errors

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

'v-model' directives require the attribute value which is valid as LHS

我做错了什么?

推荐答案

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

There's really no need to have the input field register to different properties in your vue component.

如果你想拥有一个也是可设置的计算属性，你可以使用 set & 来定义它.获取方法.

If you want to have a computed property that is also settable, you can define it using a set & get method.

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

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

One other way is to separate the value from the input change handler in the input element itself, in this case you would use the getter as you've set it

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

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

And lastly, if you need to really use two different properties you can set them on a created/activated hook (and answering your original question):

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

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

You'll always need to delegate the update to the store though so I would either go with the get/set computed property, or the value/update separation

这篇关于Vuejs - 将计算属性分配给 data()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！