मैं अपने पृष्ठ पर प्रतिक्रियाशील सामग्री के लिए vue3 का उपयोग कर रहा हूं (कोई नोड-जेएस नहीं, कोई राउटर नहीं, कुछ भी नहीं, बस <script src="vue.js"> और इनलाइन टेम्पलेट्स। तो मुझे क्लास बाइंडिंग के साथ कोई समस्या है

const app = Vue.createApp({});
console.log("Vue version:", app.version);
app.component('application', {
  data() {
    return {
      isActive: false,
    }
  },
  template: '#application'
});

app.mount('#app');
<script src="https://unpkg.com/vue@next"></script>
<script type="text/html" id="application">
  <div :class='{"someClass": isActive}'>some text</div>
  <div :class='[isActive ? "someClass" : ""]'>none class</div>
  <div :class='[isActive ? "someClass" : null]'>null class</div>
  <div :class='[isActive ? "someClass" : undefined]'>undef class</div>
</script>
<div id="app">
  <application></application>
</div>

तो जब यह प्रस्तुत करता है तो यह हमेशा वर्ग विशेषता (रेंडर किया गया तत्व) रखता है, भले ही मैं यहां कोई नहीं/शून्य डालूं,

<div class>some text</div>
<div class>none class</div>
<div class>null class</div>
<div class>undef class</div>

मुझे कुछ उदाहरण मिले लेकिन मुझे लगता है कि यह केवल 2 में शून्य पैरामीटर के साथ काम करता है

यह एक बड़ी समस्या नहीं है क्योंकि यह डीओएम तत्वों और संरचना के साथ कोई समस्या नहीं करता है लेकिन यह वास्तव में मेरे अंदर कहीं मुझे बहुत परेशान करता है।

0
John Doe 24 अगस्त 2021, 11:51

1 उत्तर

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

Vue 3 में यह मामूली समस्या है जिसे पहले ही ठीक किया जाना चाहिए लेकिन नहीं है। ..

जब/यदि ऊपर उल्लिखित समस्या ठीक से ठीक हो जाएगी, तो class विशेषता को हटा दिया जाना चाहिए जब मान शून्य हो (जैसा कि Vue 2 में हुआ था)

0
Michal Levý 24 अगस्त 2021, 13:56