मैं टैग को छोड़ने के लिए एक कस्टम Vue निर्देश बनाना चाहता हूं, लेकिन निर्देश के सही होने पर टैग की सामग्री को प्रस्तुत करना चाहता हूं।
तो उदाहरण के लिए, यदि मेरे vue उदाहरण के लिए डेटा को परिभाषित किया गया है
data:{
omitIt: true
}
और अगर मार्कअप इस तरह दिखता है:
<div v-omit="omitIt" class="someClass">
Hello world!
</div>
जब omitIt को ऊपर की तरह गलत पर सेट किया जाता है, तो मैं चाहता हूं कि निम्नलिखित को डोम में प्रस्तुत किया जाए:
<div class="someClass">
Hello world!
</div>
लेकिन जब omitIt सत्य है तो मैं केवल निम्नलिखित को डोम में प्रस्तुत करना चाहता हूं:
Hello world!
मैंने शुरुआत में निम्नलिखित करके इसे हल करने का प्रयास किया (स्वीकार्य रूप से एक कस्टम vue निर्देश नहीं):
<template v-if="!omitIt">
<div class="someClass">
</template>
Hello world!
<template v-if="!omitIt">
</div>
</template>
उपरोक्त सुंदर नहीं है, लेकिन मैंने सोचा कि शायद यह काम करेगा। लेकिन अफसोस कि जब omitIt झूठा है तो डोम में क्या दिया जाता है:
<div class="someClass"></div>
Hello world!
मैं जिस परिणाम की तलाश कर रहा हूं उसे प्राप्त करने के बारे में कोई सुझाव?
1 उत्तर
यह उत्तर गलत है, इस तरह से स्लॉट का उपयोग नहीं किया जा सकता है। इसके बजाय कृपया बर्ट का उत्तर देखें।
सबसे आसान उपाय यह होगा कि slots इस उद्देश्य के लिए, छोड़े गए तर्क को एक प्रस्ताव के रूप में पारित करना।
सामग्री वितरण भाग बल्कि सीधा हो जाता है।
आवरण घटक टेम्पलेट में:
<slot v-if="omitIt"></slot>
<div v-else>
<slot></slot>
</div>
आप जहां भी रैपर का उपयोग करना चाहते हैं:
<wrapper v-bind:omitIt="omitIt">
// Content
</wrapper>