मैं Vue के साथ अपना पहला ऐप विकसित कर रहा हूं और हेडर में एक बटन दबाकर पैनल खोलने की कोशिश करने के साथ कुछ सलाह चाहिए।

मैं एक मूल HTML टेम्पलेट से शुरू कर रहा हूं, हेडर में निहित एक बटन दबाकर अंतःक्रियाशीलता जोड़ने की कोशिश कर रहा हूं।

बटन दबाते समय, मुझे कंसोल में निम्न संदेश मिल रहा है:

vue.js:597 [Vue चेतावनी]: ईवेंट "क्लिक" के लिए अमान्य हैंडलर: अपरिभाषित हो गया

(में पाया )

मैं जिस कोड का उपयोग कर रहा हूं वह इस प्रकार है:

एचटीएमएल:

<!-- Doctype HTML5 -->
<!DOCTYPE html>
<html lang="en" />

<head>

  <link rel="stylesheet" href="css/normalize.css">

  {{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $style.Permalink }}">

  <script src="js/vue.js"></script>

  <script type="text/javascript" src="js/vue-proj-info.js"></script>

</head>

<body>
      <header>

      <div class="h-branding">
        <div id="h-nLogo">
          <img src="img/med-logo-rev.png"height="70" />
        </div>
        <div id="h-title">
          <h1>Executive Blueprint</h1>
          <p class="subheader"><span class="tr-tier">Tier 1</span> - <span class="tr-service">Executive</span></p>
        </div>
      </div>

      <div id="h-toggles">
        <div class="buttonGroup">
          <button type="" name="tier1">Tier 1</button>
          <button type="" name="tier2">Tier 2</button>
          <button type="" name="tier3">Tier 3</button>
        </div>
        <div class="buttonGroup">
          <button type="" name="executive">Executive</button>
          <button type="" name="concierge">Concierge</button>
        </div>

          </div>

  <proj-slideout ref="proj-slideout" id="proj-slideout" :class="{ isOpen: isOpen }">></proj-slideout>


      <div id="h-infoButton">
        <div class="buttonGroup">
          <button type="button" name="projInfo" class="proj-slideout-opener"
             @click="open">Project Information</button>
        </div>
      </div>

      </header>

जेएस:

    Vue.component('proj-slideout', {
  template: '#proj-slideout',
  props: ['show'],
  data: () => ({
    isOpen: false,
    projContent: 'overview' /* overview, jtbd, tiers, files */
  }),
  methods: {
    close() {
      this.isOpen = false;
    },
    open() {
      this.isOpen = true;
      console.log('Open Panel');
    }
  }
});

document.addEventListener("DOMContentLoaded", function(event) {
  var app = new Vue({
    el: 'header'
  })
});

एससीएसएस:

#proj-slideout {
  position: fixed;
  top: 0;
  right: 0;
  width: 90vw;
  height: 100vh;
  padding: 30px;
  display: flex;
  flex-direction: row;
  background-color: white;
  transform: translateX(-100%);
  transition: transform 0.6s ease(out-cubic);
  display: none;

  &.isOpen {
    transform: translateX(0);
  }

कोई भी सलाह सहायक होगी!

0
Drew Watkins 30 सितंबर 2018, 05:23

2 जवाब

सबसे बढ़िया उत्तर

आपके कोड में, @click="open", Vue पैरेंट कंपोनेंट स्कोप को संदर्भित करता है, इसलिए आपको पैरेंट Vue कॉम्पोनेन्ट में isOpen और open को परिभाषित करना चाहिए।

document.addEventListener("DOMContentLoaded", function(event) {
  var app = new Vue({
    el: 'header',
    data: () => ({
      isOpen: false,
    }),
    methods: {
      close() {
        this.isOpen = false;
      },
      open() {
        this.isOpen = true;
        console.log('Open Panel');
      }
    }
  })
});
1
ittus 30 सितंबर 2018, 06:26

आपको केवल v-show का उपयोग करना है

टेम्पलेट पर अपने घटक टैग में v-if या v-show इस तरह जोड़ें:

<projContent v-show="isOpen" ... />

ट्रिगर बटन पर isOpen को असत्य या सत्य पर इस तरह सेट करने के लिए सीधे क्लिक ईवेंट का उपयोग करें:

<button @click="isOpen = !isOpen" ... >Project Information</button>//or even better @click="isOpen ^= 1"

अब जब आप बटन पर क्लिक करेंगे तो यह isOpen को इसके विपरीत मान पर सेट कर देगा, यदि यह गलत है तो यह सत्य हो जाएगा और आपका projContent घटक दिखाई देगा, यदि यह सत्य है, तो इसे झूठा, छुपाने के लिए सेट किया जाएगा स्वचालित रूप से आपका घटक, आपको काम पूरा करने के लिए एक विधि निर्धारित करने की भी आवश्यकता नहीं है, यह सीधे घटना में सेट है।

अपने scss से display:none को हटाना न भूलें

अगर आपको ट्रांज़िशन एनिमेशन जोड़ने की ज़रूरत है, तो यहां लिंक है "Vue ट्रांज़िशन"

1
30 सितंबर 2018, 07:31