javascript - v-if 属性未在 VUE.js 中更新

Question

1我正在尝试验证文本框。我有一个具有 on blur 事件的子组件。和一个 v-if 语句，如果为真则显示错误。on blur 很好地触发了，我逐步完成了代码。它似乎做了我想要的，但是父组件/v-if 语句上的错误属性没有更新（显示错误），这是我的代码：

//Child component
    <template>
        <input type="text"
          class="form-control"
          id="input-username"
          name="custid"
          v-on:blur="$emit('hasValidCustomerId')"
          v-model="custid"/>     

        <div v-if="custidError"> Error! </div>
    <template/>
//Parent Component
 <div id="password-form">
            <transition name: currentTransition>
                <component 
                       v-on:changeSlide="changeSlide" 
                        v-on:blur="$emit('hasValidCustomerId')" 
                       :is="slides[currentSlide]">
                </component>
            </transition>
        </div>

我的 javascript

// Child Component
    var accountDetails =
      {
        template: '#template',
        components: { },
        data: function () {     
         return {
                custid: '',
               custidError: false,
               currentSlide: 0,
                currentTransition: ''
     };          
      },                      
        computed: {},
        methods: {},
      };    
// Parent Component
      var passwordFlow =
        {
        template: '#template',
        components: {
            "login": login,
            "account-details": accountDetails,
            "otc-options": otcOptions
        },
        data: function () {     
          return {
              slides: ['login', 'account-details', 'otc-options'],
              currentSlide: 0, 
              currentTransition: ' '
              custid: '',
              custidError: false 
             };     
          },             

        computed: {},
        methods: {
             hasValidCustomerId: function () {
                if (this.custid === " ")
                    this.custidError = true;        ///This gets set to true
                  console.log(this.custidError);    ///this logs false ??               
            },
      };

VUE 实例

        el: "#login-main",
       data: {},
       components: {
           "passwordFlow": passwordFlow,
            },
       computed: {},
       mounted: function () { },
       methods: {}
   });

标签： javascriptvue.jsif-statementonblur

Answer 1

在子组件中，custidError从数据更改为道具

// Child Component
    var accountDetails =
      {
        template: '#template',
        components: { },
        props: {
         custidError: {
          type: Boolean,
          default: false
        }
       },
        data: function () {     
         return {
                custid: '',
               currentSlide: 0,
                currentTransition: ''
     };          
      },                      
        computed: {},
        methods: {},
      };    

然后在 parent 中，将其传递给组件

<component :custidError="custidError"
                       v-on:changeSlide="changeSlide" 
                        v-on:blur="$emit('hasValidCustomerId')" 
                       :is="slides[currentSlide]">
                </component>