[Vuejs]-Vue setting 2 conditions with v-if

by

0👍

✅

Have you tried instead to make a flag for the complete form

Update:

<template>
  <div id='add-blog'>
      <h2>Add news Blog Post</h2>
      <form v-if='is_validated'>
          <label>User</label>
          <input type='text' v-model.lazy='user' required />
          <label>Password</label>
          <input type='password' v-model.lazy='password' required />
          <button @click='validated()'>Check me</button>
      </form>
      <div v-else>
          <p>error</p>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      user: "",
      password: "",
      is_validated: true,
    };
  },
  methods(): {
    validated() {
      if (this.user == 'name' &&  this.password == '111') {
         this.is_validated = false
      }
    }
  },
};
</script>
👤mooga

2👍

You surely can write complex expressions inside a v-if statement. As per the official documentation about expressions and directives in vue

Directive attribute values are expected to be a single JavaScript
expression

For what I see in your example it might be that your single file component does not match the proper structure. If you take a look at the single file component guide

You’ll see that your component needs a tag and inside you should write your template using your favorite templating language. Also it will be cleaner if you put your condition inside of a computed property. If we take all that into account, you could achieve your goal with a code similar to this one:

<template>
 <div>
   <form v-if="showForm">
      <label>User</label>
      <input type='text' v-model.lazy='user' required />
      <label>Password</label>
      <input type='password' v-model.lazy='password' required />
   </form>
   <div v-else>
     <p></p>
   </div>
 </div><!-- it's a good practice to have only one root element -->
</template>

<script>
export default {
  data() {
    return {
        user:'',
        password:''
    };
  },
  computed: {
   showForm () {
     return user != 'name' && password != '111';
   }
  }
};
</script>
👤Taro

1👍

I recommend to put your logic inside the script section and only call properties and methods in your template :

   <form v-if="validated">
      <label>User</label>
      <input type='text' v-model.lazy='user' required />
      <label>Password</label>
      <input type='password' v-model.lazy='password' required />
  </form>

the computed property ‘validated’ will check the provided input and return a boolean if there are valid:

     <script>
       export default {
             data() {
                return {
                user:'',
                 password:''
               };
          },
      computed:{
         validated(){return this.user != 'name' && this.password != '111'}
         }
        };
   </script>

new Vue({
  el: '#app',

  data() {
    return {
      user: '',
      password: ''
    }
  },
  computed: {
    validated() {

      if (!this.user && !this.password) {
        return true;
      } else if (this.user !== 'name') {
        if (!this.password) return true
        else if (this.password !== '111') return true
        else return false

      } else if (this.user == 'name') {
        if (!this.password) return true
        else if (this.password !== '111') return true
        else return false
      } else if (this.password !== '111') {
        if (!this.user) return true
        else if (this.user !== 'name') return true
        else return false

      } else if (this.password == '111') {
        if (!this.user) return true
        else if (this.user !== 'name') return true
        else return false
      }
    }
  }
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

<!-- Add this after vue.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>



<div id="app" class="container">
  <div v-if="validated">
    <form>
      <label>User</label>
      <input type='text' v-model.lazy='user' required />
      <label>Password</label>
      <input type='password' v-model.lazy='password' required />

    </form>
  </div>
  <div v-else>
    <p>Error !</p>
  </div>
</div>
👤Boussadjra Brahim

Leave a comment