पृष्ठ लोड पर vue.js फ़ंक्शन कैसे कॉल करें

Question 1

मेरे पास एक फ़ंक्शन है जो डेटा को फ़िल्टर करने में मदद करता है। v-on:changeजब कोई उपयोगकर्ता चयन बदलता है तो मैं उपयोग कर रहा हूं , लेकिन उपयोगकर्ता को डेटा का चयन करने से पहले भी फ़ंक्शन को कॉल करने की आवश्यकता है। मैंने AngularJSपहले उपयोग के साथ भी ऐसा ही किया है ng-initलेकिन मैं समझता हूं कि ऐसा कोई निर्देश नहीं हैvue.js

यह मेरा कार्य है:

getUnits: function () {
        var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};

        this.$http.post('/admin/units', input).then(function (response) {
            console.log(response.data);
            this.units = response.data;
        }, function (response) {
            console.log(response)
        });
    }

में bladeफ़ाइल मैं फिल्टर प्रदर्शन करने के लिए ब्लेड रूपों का उपयोग करें:

<div class="large-2 columns">
        {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
    </div>
    <div class="large-3 columns">
        {!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!}
    </div>

जब मैं किसी विशिष्ट आइटम का चयन करता हूं तो यह ठीक काम करता है। फिर अगर मैं सभी कहने पर क्लिक all floorsकरता हूं , तो यह काम करता है। पेज लोड होने पर मुझे क्या चाहिए, यह उस getUnitsविधि को कहता है जो $http.postखाली इनपुट के साथ प्रदर्शन करेगी । बैकएंड में मैंने अनुरोध को इस तरह से संभाला है कि यदि इनपुट खाली है तो यह सभी डेटा देगा।

इसमें मैं कैसे कर सकता हूं vuejs2?

मेरा कोड: http://jsfiddle.net/q83bnLrx

Question 2

आप इस फ़ंक्शन को Vue घटक के पहले खंड में कॉल कर सकते हैं: निम्न की तरह:

 ....
 methods:{
     getUnits: function() {...}
 },
 beforeMount(){
    this.getUnits()
 },
 ......

वर्किंग फिडल: https://jsfiddle.net/q83bnLrx/1/

विभिन्न जीवन चक्र हुक Vue प्रदान कर रहे हैं:

मैंने कुछ सूचीबद्ध किए हैं:

beforeCreate : तुल्यकालिक कहा जाता है के बाद उदाहरण सिर्फ प्रारंभ कर दिया गया है, डेटा अवलोकन और घटना / द्रष्टा सेटअप से पहले।
बनाया गया : उदाहरण बनने के बाद समकालिक रूप से कॉल किया गया। इस स्तर पर, उदाहरण ने विकल्पों को संसाधित करना समाप्त कर दिया है जिसका अर्थ है कि निम्नलिखित सेट किए गए हैं: डेटा अवलोकन, गणना किए गए गुण, विधियाँ, घड़ी / ईवेंट कॉलबैक। हालाँकि, बढ़ते चरण को शुरू नहीं किया गया है, और $ एल संपत्ति अभी तक उपलब्ध नहीं होगी।
beforeMount : कहा जाता है ठीक पहले लगाने शुरू होता है: प्रस्तुत करना समारोह के बारे में पहली बार के लिए कहा जा रहा है।
माउंटेड : उदाहरण के बाद कॉल किया गया है, जहां अभी एल को माउंट किया गया है, जिसे नए बनाए गए द्वारा प्रतिस्थापित किया गया है vm.$el।
पहले यूडेट करें : जब वर्चुअल डोम फिर से रेंडर और पैच किया जाता है, तो डेटा में बदलाव होने पर कॉल किया जाता है।
अद्यतित : डेटा परिवर्तन के बाद कॉल किए जाने पर वर्चुअल DOM को फिर से रेंडर और पैच किया जाता है।

आप यहां पूरी सूची देख सकते हैं ।

आप चुन सकते हैं कि कौन सा हुक आपके लिए सबसे उपयुक्त है और ऊपर दिए गए नमूना कोड की तरह आपको फ़ंक्शन करने के लिए इसे हुक करें।

Question 3

आपको ऐसा कुछ करने की आवश्यकता है (यदि आप पृष्ठ लोड पर विधि को कॉल करना चाहते हैं):

new Vue({
    // ...
    methods:{
        getUnits: function() {...}
    },
    created: function(){
        this.getUnits()
    }
});

Question 4

आप इसका उपयोग करके भी कर सकते हैं mounted

https://vuejs.org/v2/guide/migration.html#ready-replaced

....
methods:{
    getUnits: function() {...}
},
mounted: function(){
    this.$nextTick(this.getUnits)
}
....

Question 5

खबरदार है कि जब mountedएक घटक पर घटना को निकाल दिया जाता है, तो सभी Vue घटकों को अभी तक प्रतिस्थापित नहीं किया जाता है, इसलिए DOM अभी अंतिम नहीं हो सकता है।

onloadDOM के तैयार होने के बाद वास्तव में DOM घटना का अनुकरण करने के लिए , लेकिन पेज तैयार होने से पहले, vm का उपयोग करें । $ nextTick अंदर से करें mounted:

mounted: function () {
  this.$nextTick(function () {
    // Will be executed when the DOM is ready
  })
}

Question 6

यदि आपको सरणी में डेटा मिलता है तो आप नीचे की तरह कर सकते हैं। यह मेरे लिए काम किया है

    <template>
    {{ id }}
    </template>
    <script>

    import axios from "axios";

        export default {
            name: 'HelloWorld',
            data () {
                return {
                    id: "",

                }
            },
    mounted() {
                axios({ method: "GET", "url": "https://localhost:42/api/getdata" }).then(result => {
                    console.log(result.data[0].LoginId);
                    this.id = result.data[0].LoginId;
                }, error => {
                    console.error(error);
                });
            },
</script>