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 IF 它存在，但如果{{{{}}属性，则返回空白studentName数据（）属性1}}不存在？我试过了：

getStudent.name

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

'v-model'指令需要属性值，该值有效为LHS

我做错了什么？

Answer 1

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

如果您想拥有一个也可设置的计算属性，您可以使用set＆amp; amp;得到方法。

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 computed属性，要么使用值/更新分隔

Vuejs - 为数据（）分配计算属性

1 个答案: