मैं Vue का अभ्यास कर रहा हूं और मुझे समस्या है, क्या v-if का उपयोग करके 2 शर्तें सेट करना संभव है? मेरा मतलब है कि यह मेरा कोड है:

तो मूल रूप से && का उपयोग करके दो शर्तों को सेट करना संभव है या इसे कुछ अलग तरीके से किया जाना चाहिए?

अद्यतन पूर्ण कोड:

मैंने 3 तरीकों की कोशिश की, टेम्पलेट, विधियों और गणना विधियों के अंदर, वे सभी केवल एक शर्त की जांच करते हैं

आपकी मदद से दोस्तों मैंने इसे थोड़ा संशोधित किया और अब यह काम करता है! मदद के लिए आप सभी का बहुत-बहुत धन्यवाद लेकिन आखिरी बात है, कंसोल लॉग में यह मुझे दिखाता है: "अनकॉट टाइप एरर: _vm.validated एक फ़ंक्शन नहीं है", यह दिखाया गया है कि सत्यापन सही है या नहीं, इससे कोई फर्क नहीं पड़ता

<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 v-on:click.prevent='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,
    };
  },
  computed: {
    validated() {
      if (this.user == 'name' &&  this.password == '111') {
          return this.is_validated = false;
      }
    }
  },
};
</script>
0
Zirek 15 अक्टूबर 2018, 19:58

2 जवाब

मैं आपके तर्क को स्क्रिप्ट अनुभाग के अंदर रखने की सलाह देता हूं और केवल आपके टेम्पलेट में गुणों और विधियों को कॉल करता हूं:

   <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>

गणना की गई संपत्ति 'मान्य' प्रदान किए गए इनपुट की जांच करेगी और वैध होने पर बूलियन लौटाएगी:

     <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>
1
Boussadjra Brahim 15 अक्टूबर 2018, 18:08

आप निश्चित रूप से एक v-if कथन के अंदर जटिल भाव लिख सकते हैं। vue में अभिव्यक्तियों और निर्देशों के बारे में आधिकारिक दस्तावेज़ीकरण के अनुसार

निर्देशात्मक विशेषता मान एकल JavaScript व्यंजक होने की उम्मीद है

मैं आपके उदाहरण में जो देखता हूं उसके लिए यह हो सकता है कि आपका एकल फ़ाइल घटक उचित संरचना से मेल नहीं खाता। यदि आप एकल फ़ाइल घटक पर एक नज़र डालते हैं गाइड

आप देखेंगे कि आपके घटक को एक टैग की आवश्यकता है और अंदर आपको अपनी पसंदीदा टेम्प्लेटिंग भाषा का उपयोग करके अपना टेम्प्लेट लिखना चाहिए। साथ ही यदि आप अपनी स्थिति को गणना की गई संपत्ति के अंदर रखते हैं तो यह क्लीनर होगा। यदि हम इन सब बातों को ध्यान में रखते हैं, तो आप इस तरह के कोड के साथ अपना लक्ष्य प्राप्त कर सकते हैं:

<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>
2
Taro 15 अक्टूबर 2018, 17:13