পৃষ্ঠা লোডে কোনও 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

আপনি কোনও ভ্যু উপাদানটির মাউন্ট বিভাগের আগে এই ফাংশনটিতে কল করতে পারেন : নীচের মত:

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

কাজের ফাঁকা কাজ: https://jsfiddle.net/q83bnLrx/1/

বিভিন্ন লাইফাইসাইকেল হুক ভ্যু সরবরাহ করে:

আমি কয়েকটি তালিকাভুক্ত করেছি:

প্রাকক্রিট : তথ্য পর্যবেক্ষণ এবং ইভেন্ট / পর্যবেক্ষক সেটআপের আগে উদাহরণটি সবেমাত্র শুরু হওয়ার পরে সিঙ্ক্রোনাসলি বলা হয়।
তৈরি করা হয়েছে : দৃষ্টান্তটি তৈরি হওয়ার পরে সিঙ্ক্রোনাসলি বলা হয়। এই পর্যায়ে, উদাহরণস্বরূপ বিকল্পগুলির প্রক্রিয়া শেষ হয়েছে যার অর্থ নিম্নলিখিতগুলি সেট আপ করা হয়েছে: ডেটা পর্যবেক্ষণ, গণনা করা বৈশিষ্ট্য, পদ্ধতি, ঘড়ি / ইভেন্ট কলব্যাক্স। তবে মাউন্টিং পর্ব শুরু করা হয়নি, এবং property এল সম্পত্তি এখনও উপলব্ধ হবে না।
পূর্বমাউন্ট : মাউন্টিং শুরু হওয়ার ঠিক আগে ডাকা: রেন্ডার ফাংশনটি প্রথমবারের মতো ডাকা হবে।
মাউন্ট করা হয়েছে : সবেমাত্র ইনস্টল করার পরে কল করা হয়েছে যেখানে এলটি সদ্য নির্মিত দ্বারা প্রতিস্থাপন করা হয়েছে vm.$el।
পূর্ববর্তী আপডেট : যখন ভার্চুয়াল ডিওএম পুনরায় রেন্ডার এবং প্যাচ করার আগে ডেটা পরিবর্তন হয় তখন ডাকা হয়।
আপডেট হয়েছে : ডেটা পরিবর্তনের পরে ডাকা ভার্চুয়াল ডিওএমকে পুনরায় রেন্ডার এবং প্যাচ করার কারণ হয়ে।

আপনি এখানে সম্পূর্ণ তালিকার উপর নজর রাখতে পারেন ।

কোন হুক আপনার পক্ষে সবচেয়ে উপযুক্ত এবং আপনি উপরে বর্ণিত নমুনা কোডের মতো আপনাকে ফাংশন বলতে কল করতে পারেন তা চয়ন করতে পারেন।

Question 3

আপনাকে এর মতো কিছু করতে হবে (আপনি যদি পৃষ্ঠাটির লোডে পদ্ধতিটি কল করতে চান):

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

Question 4

আপনি এটি ব্যবহার করেও করতে পারেন mounted

https://vuejs.org/v2/guide/migration.html# تیار- পুনঃস্থাপন

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

Question 5

সাবধান হন যে যখন mountedইভেন্টটি কোনও উপাদানগুলিতে চালিত হয় তখন সমস্ত ভ্যু উপাদানগুলি এখনও প্রতিস্থাপন করা হয় না, তাই ডিওএম চূড়ান্ত নাও হতে পারে।

DOM onloadইভেন্টটি সত্যই অনুকরণ করতে , যেমন DOM প্রস্তুত হওয়ার পরে গুলি চালানোর জন্য তবে পৃষ্ঠাটি আঁকার আগে, ভিএম ব্যবহার করুন $ পরবর্তী ভিতরে থেকে টিক করুন 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>