代码之家 › 专栏 › 技术社区 › timpone

如何通过计算属性在Vue.js/infinite loop prevention中管理html表单中的属性

vue.js javascript

0

timpone · 技术社区 · 7 年前

我有一个Vue.js注册表单,其中有许多类似的字段。我的理解是,我应该将这些值初始化为道具,而不是对象或数组(因为它们将按值传递)。

我正在对getter/setter使用computed属性。我可以想象,当我设置computed属性时,我需要向父组件发出值。这(一般来说)是正确的方法吗?如果没有,会是什么?

如第一部分中的拟议组成部分以及在第二部分中如何使用:

Vue.component('signup-input',{
  props:['placeholder','err','initialValue'],
  template:`
  <label>
    <div class='signup-font'>Company Name Within Component</div>
      <input @focus="err = null" v-model="tmpItem" :placeholder="placeholder" size="30" type="text" v-bind:class="{'no-margin error': err }" />
      <label class="error copy-error" v-if="err">
        {{err}}
      </label>
   </label>
  `,
  computed:{
    tmpItem: {
      get: function(){
        return this.initialValue;
      },
      set: function(newValue){
        console.log('here is newValue: ' + newValue); 
        // I emit here and wouldn't an infinite loop be caused? 
      }
    }
  },
})


var app7 = new Vue({
  el: '#signup',
  template: `
    <div id="page-bg">
      <signup-input :placeholder="companyName.placeholder" :err="companyName.err" :initialValue="companyName.value"></signup-input>

      <label for="company_name">
        <div class='signup-font'>Company Name</div>
          <input @focus="companyName.err = null" placeholder="My Company" v-model="companyName.value" size="30" type="text" v-bind:class="{'no-margin error': companyName.err }" />
          <label class="error copy-error" v-if="companyName.err">
            {{companyName.err}}
          </label>
       </label>

1 回复 | 直到 7 年前

1

0

Aldarund 7 年前

我想你在找这样的东西。参见文档 .sync

Vue.component('signup-input',{
  props:['placeholder','err','initialValue'],
  template:`
  <label>
    <div class='signup-font'>Company Name Within Component</div>
      <input @focus="err = null" v-model="localValue" :placeholder="placeholder" 
       @input="$emit('update:initialValue', localValue)"
        size="30" type="text" v-bind:class="{'no-margin error': err }" />
      <label class="error copy-error" v-if="err">
        {{err}}
      </label>
   </label>
  `,
  data() {
    return {
      localValue: this.initialValue
   }
  }
})

var app7 = new Vue({
  el: '#signup',
  template: `
    <div id="page-bg">
      <signup-input :placeholder="companyName.placeholder" :err="companyName.err" :initialValue="companyName.value"></signup-input>

      <label for="company_name">
        <div class='signup-font'>Company Name</div>
          <input @focus="companyName.err = null" placeholder="My Company" v-model.sync="companyName.value" size="30" type="text" v-bind:class="{'no-margin error': companyName.err }" />
          <label class="error copy-error" v-if="companyName.err">
            {{companyName.err}}
          </label>
       </label>