ફોર્મ ઇનપુટ બાઈન્ડિંગ્સ (Form Input Bindings) ​

ફ્રન્ટએન્ડ પર ફોર્મ સાથે કામ કરતી વખતે, આપણે ઘણીવાર ફોર્મ ઇનપુટ એલિમેન્ટ્સના સ્ટેટને જાવાસ્ક્રિપ્ટમાં અનુરૂપ સ્ટેટ સાથે સિંક (sync) કરવાની જરૂર પડે છે. વેલ્યુ બાઈન્ડિંગ્સ અને ચેન્જ ઇવેન્ટ લિસનર્સને મેન્યુઅલી વાયર અપ કરવું કંટાળાજનક હોઈ શકે છે:

<input
  :value="text"
  @input="event => text = event.target.value">

v-model ડિરેક્ટિવ આપણને ઉપરોક્તને સરળ બનાવવામાં મદદ કરે છે:

<input v-model="text">

વધુમાં, v-model નો ઉપયોગ વિવિધ પ્રકારના ઇનપુટ્સ, <textarea>, અને <select> એલિમેન્ટ્સ પર થઈ શકે છે. તે જે એલિમેન્ટ પર ઉપયોગમાં લેવાય છે તેના આધારે તે આપમેળે વિવિધ DOM પ્રોપર્ટી અને ઇવેન્ટ જોડીમાં વિસ્તરે છે:

• ટેક્સ્ટ પ્રકારો સાથેના <input> અને <textarea> એલિમેન્ટ્સ value પ્રોપર્ટી અને input ઇવેન્ટનો ઉપયોગ કરે છે;
• <input type="checkbox"> અને <input type="radio"> checked પ્રોપર્ટી અને change ઇવેન્ટનો ઉપયોગ કરે છે;
• <select> value નો પ્રોપ તરીકે અને change નો ઇવેન્ટ તરીકે ઉપયોગ કરે છે.

મૂળભૂત વપરાશ ​

લખાણ (Text) ​

<p>સંદેશ છે: {{ message }}</p>
<input v-model="message" placeholder="કંઈક લખો" />

બહુરેખા લખાણ (Multiline Text) ​

<span>બહુરેખા સંદેશ છે:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="બહુરેખા સંદેશ લખો"></textarea>

નોંધ કરો કે <textarea> ની અંદર ઇન્ટરપોલેશન (interpolation) કામ કરશે નહીં. તેના બદલે v-model નો ઉપયોગ કરો.

<!-- ખરાબ -->
<textarea>{{ text }}</textarea>

<!-- સારું -->
<textarea v-model="text"></textarea>

ચેકબોક્સ (Checkbox) ​

સિંગલ ચેકબોક્સ, બુલિયન (boolean) વેલ્યુ:

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

આપણે બહુવિધ ચેકબોક્સને સમાન એરે (array) અથવા Set વેલ્યુ સાથે પણ બાંધી શકીએ છીએ:

const checkedNames = ref([])

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

<div>ચેક કરેલ નામો: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>

આ કિસ્સામાં, checkedNames એરે હંમેશા વર્તમાન ચેક કરેલા બોક્સના મૂલ્યો ધરાવશે.

રેડિયો (Radio) ​

<div>પસંદ કરેલ: {{ picked }}</div>

<input type="radio" id="one" value="એક" v-model="picked" />
<label for="one">એક</label>

<input type="radio" id="two" value="બે" v-model="picked" />
<label for="two">બે</label>

સિલેક્ટ (Select) ​

સિંગલ સિલેક્ટ:

<div>પસંદ કરેલ: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">મહેરબાની કરીને એક પસંદ કરો</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

મલ્ટીપલ સિલેક્ટ (એરે સાથે બાઉન્ડ):

<div>પસંદ કરેલ: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

સિલેક્ટ ઓપ્શન્સ v-for સાથે ડાયનેમિકલી રેન્ડર કરી શકાય છે:

const selected = ref('A')

const options = ref([
  { text: 'એક', value: 'A' },
  { text: 'બે', value: 'B' },
  { text: 'ત્રણ', value: 'C' }
])

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'એક', value: 'A' },
        { text: 'બે', value: 'B' },
        { text: 'ત્રણ', value: 'C' }
      ]
    }
  }
}

<div>પસંદ કરેલ: {{ selected }}</div>

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

વેલ્યુ બાઈન્ડિંગ્સ (Value Bindings) ​

રેડિયો, ચેકબોક્સ અને સિલેક્ટ ઓપ્શન્સ માટે, v-model બાઇન્ડિંગ વેલ્યુ સામાન્ય રીતે સ્ટેટિક સ્ટ્રિંગ્સ (અથવા ચેકબોક્સ માટે બુલિયન) હોય છે:

<!-- ચેક કરતી વખતે `picked` એ સ્ટ્રિંગ "a" છે -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` એ કાં તો true અથવા false છે -->
<input type="checkbox" v-model="toggle" />

<!-- પ્રથમ ઓપ્શન પસંદ કરવામાં આવે ત્યારે `selected` એ સ્ટ્રિંગ "abc" છે -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

પરંતુ કેટલીકવાર આપણે વેલ્યુને વર્તમાન એક્ટિવ ઇન્સ્ટન્સ પર ડાયનેમિક પ્રોપર્ટી સાથે બાંધવા માંગીએ છીએ. આપણે તે હાંસલ કરવા માટે v-bind નો ઉપયોગ કરી શકીએ છીએ. વધુમાં, v-bind નો ઉપયોગ કરવાથી આપણને ઇનપુટ વેલ્યુને નોન-સ્ટ્રિંગ વેલ્યુસ સાથે બાંધવાની મંજૂરી મળે છે.

ચેકબોક્સ (Checkbox) ​

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value અને false-value એ Vue-વિશિષ્ટ એટ્રિબ્યુટ્સ છે જે ફક્ત v-model સાથે કામ કરે છે. અહીં જ્યારે બોક્સ ચેક કરવામાં આવશે ત્યારે toggle પ્રોપર્ટીની વેલ્યુ 'yes' પર સેટ કરવામાં આવશે, અને જ્યારે અનચેક કરવામાં આવશે ત્યારે 'no' પર સેટ કરવામાં આવશે. તમે v-bind નો ઉપયોગ કરીને તેમને ડાયનેમિક વેલ્યુસ સાથે પણ બાંધી શકો છો:

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

રેડિયો (Radio) ​

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

જ્યારે પ્રથમ રેડિયો ઇનપુટ ચેક કરવામાં આવશે ત્યારે pick એ first ની વેલ્યુ પર સેટ થશે, અને જ્યારે બીજું ચેક કરવામાં આવશે ત્યારે second ની વેલ્યુ પર સેટ થશે.

સિલેક્ટ ઓપ્શન્સ ​

<select v-model="selected">
  <!-- ઇનલાઇન ઓબ્જેક્ટ લિટરલ -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model નોન-સ્ટ્રિંગ વેલ્યુસના વેલ્યુ બાઈન્ડિંગ્સને પણ સપોર્ટ કરે છે! ઉપરના ઉદાહરણમાં, જ્યારે ઓપ્શન પસંદ કરવામાં આવે છે, ત્યારે selected ઓબ્જેક્ટ લિટરલ વેલ્યુ { number: 123 } પર સેટ થશે.

મોડિફાયર્સ (Modifiers) ​

.lazy ​

ડિફોલ્ટ રૂપે, v-model દરેક input ઇવેન્ટ પછી ડેટા સાથે ઇનપુટને સિંક કરે છે (ઉપર જણાવ્યા મુજબ IME કમ્પોઝિશનના અપવાદ સાથે). તમે તેના બદલે change ઇવેન્ટ્સ પછી સિંક કરવા માટે lazy મોડિફાયર ઉમેરી શકો છો:

<!-- "input" ને બદલે "change" પછી સિંક થશે -->
<input v-model.lazy="msg" />

.number ​

જો તમે ઇચ્છો છો કે યુઝર ઇનપુટ આપમેળે નંબર તરીકે ટાઇપકાસ્ટ (typecast) થાય, તો તમે તમારા v-model સંચાલિત ઇનપુટ્સમાં number મોડિફાયર ઉમેરી શકો છો:

<input v-model.number="age" />

જો વેલ્યુ parseFloat() સાથે પાર્સ કરી શકાતી નથી, તો તેના બદલે અસલ (સ્ટ્રિંગ) વેલ્યુનો ઉપયોગ કરવામાં આવે છે. ખાસ કરીને, જો ઇનપુટ ખાલી હોય (દાખલા તરીકે યુઝર દ્વારા ઇનપુટ ફીલ્ડ સાફ કર્યા પછી), તો ખાલી સ્ટ્રિંગ પરત કરવામાં આવે છે. આ વર્તન DOM પ્રોપર્ટી valueAsNumber થી અલગ છે.

જો ઇનપુટમાં type="number" હોય તો number મોડિફાયર આપમેળે લાગુ થાય છે.

.trim ​

જો તમે ઇચ્છો છો કે યુઝર ઇનપુટમાંથી વ્હાઇટ સ્પેસ (whitespace) આપમેળે ટ્રિમ થાય, તો તમે તમારા v-model-સંચાલિત ઇનપુટ્સમાં trim મોડિફાયર ઉમેરી શકો છો:

<input v-model.trim="msg" />

કમ્પોનન્ટ સાથે v-model ​

જો તમે હજી સુધી Vue ના કમ્પોનન્ટથી પરિચિત નથી, તો તમે અત્યારે આને છોડી શકો છો.

HTML ના બિલ્ટ-ઇન ઇનપુટ પ્રકારો હંમેશા તમારી જરૂરિયાતોને પૂર્ણ કરશે નહીં. સદભાગ્યે, Vue કમ્પોનન્ટ્સ તમને સંપૂર્ણ કસ્ટમાઇઝ્ડ વર્તન સાથે પુનઃઉપયોગી ઇનપુટ્સ બનાવવાની મંજૂરી આપે છે. આ ઇનપુટ્સ v-model સાથે પણ કામ કરે છે! વધુ જાણવા માટે, કમ્પોનન્ટ્સ માર્ગદર્શિકામાં v-model સાથે વપરાશ વિશે વાંચો.