मौजूदा मूल्य

Question

के साथ वू फॉर्म इनपुट बाइंडिंग मैं मॉडल के साथ एक इनपुट बांधना चाहता हूं। जब पृष्ठ लोड होता है, तो इनपुट का मूल्य होता है। लेकिन जब मैं एक मॉडल के साथ बांधता हूं, तो यह खाली हो जाता है क्योंकि मैं मॉडल को शून्य या खाली मान के साथ प्रारंभ करता हूं।

<div id="update-email"> 
    <input type="text" name="email" value="me@example.com" v-model="email"> 
    {{ email }} 
</div> 

जावास्क्रिप्ट:

new Vue({ 
    el: '#update-email', 
    data() { 
    return { 
     email: '', 
    }; 
    } 
}); 

jsfiddle: https://jsfiddle.net/Debiprasad/v8wyj2kw/

मैं कैसे इनपुट जब यह लोड करता है के मूल्य के साथ email मान को अद्यतन कर सकते हैं?

Answer 1

मैं इनपुट मॉडल के मूल्य पर अपना मॉडल मान प्रारंभ करके इसे संभालता हूं। इस तरह जब व्यू प्रारंभ में इनपुट फ़ील्ड को मॉडल मान सेट करता है, तो यह वह मान है जो इनपुट फ़ील्ड में था।

<div id="update-email"> 
    <input id="email" type="text" name="email" value="me@example.com" v-model="email"> 
    {{ email }} 
</div> 

Javasacript:

jQuery का उपयोग कर नीचे उदाहरण

new Vue({ 
el: '#update-email', 
    data() { 
    return { 
     email: $('#email').val(), 
    }; 
    } 
}); 

आप jQuery के बिना यह करने के लिए, बस $('#email').val()document.getElementById('email').value

Answer 2

लिए एक गैर JQuery संस्करण को जोड़ने के लिए बदल चाहते हैं रॉन सी के जवाब के, और लिंक यूरी से जुड़े उत्तर को स्पष्ट करने के लिए, यहां the solution suggested by the creator of Vue.js:

https://jsfiddle.net/vzns7us7/

टेम्पलेट:

<script> 
// rendered by server 
window.__FORM__ = { 
    fill: 'my_default_value' 
} 
</script> 

<div id="test"> 
    <input type="text" v-model="fill"> 
    {{ fill }} 
</div> 

जावास्क्रिप्ट:

new Vue({ 
    el: '#test', 
    data() { 
     return window.__FORM__ || { 
      fill: 'none' 
     } 
    } 
}); 

Answer 3

आप तत्व में मूल्य डाल दिया और एक इनपुट घटना जारी करने के लिए एक निर्देश का उपयोग कर सकते हैं।

new Vue({ 
 
    el: '#update-email', 
 
    data: { 
 
    email: null 
 
    }, 
 
    directives: { 
 
    init: { 
 
     bind(el) { 
 
     el.value = el.getAttribute('value'); 
 
     el.dispatchEvent(new Event('input')); 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="update-email"> 
 
    <input v-init type="text" name="email" value="me@example.com" v-model="email"> {{ email }} 
 
</div>

Answer 4

रॉन की प्रतिक्रिया और yuriy636 की टिप्पणी पूरी तरह से अपने सवाल का जवाब कर रहे हैं। केवल एक और अधिक उन्नत समाधान Vuex (https://vuex.vuejs.org/en/) का उपयोग कर के साथ पूरक हैं:

const store = new Vuex.Store({ 
 
    state: { 
 
    email: 'me@example.com' 
 
    } 
 
}) 
 
new Vue({ 
 
    el: '#update-email', 
 
    store, 
 
    created() { 
 
    this.email = this.$store.state.email 
 
    }, 
 
    data() { 
 
    return { 
 
     email: '', 
 
    }; 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.min.js"></script> 
 

 
<div id="update-email"> 
 
    <input type="text" name="email" v-model="email"> {{ email }} 
 
</div>