मैं Vue के साथ एक select तत्व में एक इनपुट बॉक्स कैसे जोड़ सकता हूं?

मान लें कि मेरे पास ['Red', 'Yellow', 'Green'] जैसी सूची है, और उपयोगकर्ता 'ब्लैक' चुनना चाहता है जो सूची में नहीं है।

मैं चाहता हूं कि उपयोगकर्ता इसे चुनिंदा तत्व के भीतर टाइप करने में सक्षम हो, इसे सूची में जोड़ा जाए, और चुना जाए।

यहाँ मेरा कोड अब तक है:

<template>
  <div >
     <div class="form-group col-md-2">
          <label >Colors</label>
            <select v-model="selected" class="form-control" >
              <option v-for="option in list"  class="form-control" :key="option">
                  {{ option}}
              </option>
          </select>
        </div>
        <p>The selected color is: {{selected}}</p>
  </div>
</template>

<script>
export default {
  data(){
      return{
      list:['Red', 'Yellow', 'Green'],
      selected: '',
    };
  },
}
</script>
0
Daniel Kahalani 23 पद 2020, 17:31
क्या आप चयन में और विकल्प जोड़ना चाहते हैं या आप क्या करने की कोशिश कर रहे हैं?
 – 
Mikael Dalholm
23 पद 2020, 17:35
मैं पूर्वनिर्धारित विकल्पों की सूची बनाने की कोशिश कर रहा हूं, और यदि कोई विकल्प प्रासंगिक नहीं है तो उपयोगकर्ता को मुफ्त टेक्स्ट जोड़ने दें
 – 
Daniel Kahalani
23 पद 2020, 17:40
क्या आप अधिक विशिष्ट हो सकते हैं? संदर्भ को जाने बिना इसका उत्तर देना कठिन है।
 – 
Daniel_Knights
23 पद 2020, 18:09
मान लें कि मेरी सूची ['लाल', 'पीला', 'हरा'] है, और उपयोगकर्ता 'ब्लैक' चुनना चाहता है जो सूची में नहीं है। मैं चाहता हूं कि उपयोगकर्ता इसे टाइप कर सके और इसे इनपुट के रूप में प्राप्त कर सके
 – 
Daniel Kahalani
23 पद 2020, 18:18
यह वास्तव में आपके उपयोग-मामले पर निर्भर है। इस समय आप जो पूछ रहे हैं वह एक टेक्स्ट इनपुट जोड़ने जितना आसान है जो अपनी डेटा प्रॉपर्टी से जुड़ा हुआ है। डेटा डालने के बाद आप उसके साथ क्या करते हैं और यह पृष्ठ पर अन्य कार्यक्षमता को कैसे प्रभावित करता है, यह महत्वपूर्ण है। क्या आप शेष घटक पोस्ट कर सकते हैं?
 – 
Daniel_Knights
23 पद 2020, 18:46

1 उत्तर

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

खोजने योग्य ड्रॉपडाउन के लिए आप vue-multiselect का उपयोग कर सकते हैं:

<multiselect
  :options="list"
  v-model="selected"
></multiselect>

...और टाइप किए गए रंग को list में जोड़ने के लिए कुछ कस्टम कोड जोड़ें जब Enter या रिटर्न को दबाया जाए:

<div @keyup.enter="addColor($event)">
  <multiselect
    :options="list"
    v-model="selected"
    @search-change="typed = $event"
  ></multiselect>
</div>
addColor() {
  if (!this.list.includes(this.typed)) this.list.push(this.typed); // check if inputted color is already in the list; if not, add it; if so, don't
  this.selected = this.typed; // set `selected` to the currently typed color
},

demo

ध्यान दें कि आपको vue-multiselect के लिए CSS जोड़ना होगा, जिसे आप इंस्टॉलेशन निर्देशों में देख सकते हैं यहां.

सैंडबॉक्स और पूरा कोड

0
marsnebulasoup 28 पद 2020, 05:08
शुक्रिया! लेकिन फिर भी यह एक ही तत्व में नहीं बल्कि दो में है।
 – 
Daniel Kahalani
24 पद 2020, 10:31
- मुझे क्षमा करें, मुझे यकीन नहीं है कि मैं अनुसरण करता हूं। "यह एक ही तत्व में नहीं बल्कि दो" से आपका क्या मतलब है?
 – 
marsnebulasoup
25 पद 2020, 00:34
आपके कोड में चयन और इनपुट तत्व हैं। मैं केवल चयन करना चाहता हूं लेकिन 2 विकल्प देता हूं, पहले सूची प्रदर्शित करने के लिए तीर दबाएं और दूसरा रंग दर्ज करने के लिए सेल को दबाएं जो सूची में नहीं है। @marsnebulasoup
 – 
Daniel Kahalani
26 पद 2020, 14:17
ठीक है, मैंने अपना उत्तर @DanielKahalani अपडेट कर दिया है। अगर यह आप के लिए काम करता है तो मुझे बतलाएगा।
 – 
marsnebulasoup
28 पद 2020, 05:08
हाँ, यह काम करता है! बहुत - बहुत धन्यवाद! @marsnebulasoup
 – 
Daniel Kahalani
28 पद 2020, 11:48