আপনি কি Vue.js কে পুনরায় লোড / পুনরায় রেন্ডার করতে বাধ্য করতে পারেন?

Question

শুধু একটি দ্রুত প্রশ্ন।

আপনি কি সবকিছু পুনরায় লোড / পুনরায় গণনা করতে বাধ্য Vue.jsকরতে পারেন ? যদি তাই হয়, কিভাবে?

Comments

এখানে আরও ভাল সমর্থন পেতে পারেন github.com/vuejs/ আলোচনা

— কোরি ড্যানিয়েলসন

দুর্দান্ত, সেই আলোচনার জায়গাটি সম্পর্কে জানতেন না। আমি সেখানে চেষ্টা করব।

— ডেভ

আপনি একটি প্রতিক্রিয়া পেয়ে শেষ? আমি পাশাপাশি জানতে আগ্রহী।

— ওডম্যান

ঠিক মনে নেই। তবে আমি এখানে কিছু সংকেত দিয়ে ইস্যুটি খুললাম: github.com/vuejs/ আলোচনা

— ডেভ

আমার ভিউ-র দিকনির্দেশনা রয়েছে এবং আমি যখন অ্যারেটিতে দুটি বস্তু ম্যানুয়ালি অদলবদল করি তখন আমি ব্যবহার করতে পারি। এর পরে ভ্যু স্বয়ংক্রিয়ভাবে টেমপ্লেট পুনরায় সরবরাহ করতে পারে না। আমি workaround ব্যবহার করেছি: কেবল এই অ্যারে দিয়ে যে কোনও ক্রিয়া করুন (খালি বস্তুটি ধাক্কা দিয়ে স্প্লাইস করুন) - এটি রেন্ডারটিকে ট্রিগার করে। তবে এটি বিশেষ ক্ষেত্রে।

— ফায়োডর খুরছোভ

Answer 1

এই যাদু বানান চেষ্টা করুন:

vm.$forceUpdate();

কোনও ঝুলন্ত ভার তৈরি করার দরকার নেই :)

আপডেট: যখন আমি কেবল ভ্যুজেএস-এর সাথে কাজ শুরু করি তখন আমি এই সমাধানটি পেয়েছি। তবে আরও অনুসন্ধানের ফলে ক্র্যাচ হিসাবে এই পদ্ধতির প্রমাণিত হয়েছিল। যতদূর আমি স্মরণ করি, কিছুক্ষণের মধ্যে আমি এ থেকে মুক্তি পেয়েছি যা স্বয়ংক্রিয়ভাবে রিফ্রেশ করতে ব্যর্থ সমস্ত বৈশিষ্ট্য (বেশিরভাগ নেস্টেড ব্যক্তিদের) গণিত বৈশিষ্ট্যগুলিতে ফেলে দেয়।

এখানে আরও তথ্য: https://vuejs.org/v2/guide/computes.html

Comments

আমি ভ্যুতে একটি ফর্ম উইজার্ড উপাদান ব্যবহার করার সময় এটি সত্যিই আমাকে সাহায্য করেছিল। আমার ফর্মের ক্ষেত্রগুলি ডেটা ভেরিয়েবল অক্ষত থাকলেও রাষ্ট্রটি হারাচ্ছিল। আমি যখন ফিরে যাব তখন দেখা দর্শনগুলি রিফ্রেশ করতে আমি এটি ব্যবহার করছি, আমাকে সেটটাইমআউট ফাংশনে রাখতে হবে।

— জিমি Ilenloa

নোট করুন যে ভ্যু ফাইলগুলিতে আপনার এটি দরকার this ফোর্সআপডেট ();

— কাটিনকা হেসেলিংক

দীর্ঘ অক্ষের কলের পরে এটি আপডেট করার জন্য এটি দুর্দান্ত কাজ করে।

— AlfredBr

কিছুটা অদ্ভুত উপায়ে $forceUpdate()কখনও কখনও আমার জন্য 2.5.17 এ কাজ করেনি।

— আবানা ক্লারা

@ আবানাক্লারা $ ফোর্সআপডেট () কখনই কোনও সর্বজনীন পদ্ধতি ছিল না, আমি এটি ভ্যু-র উত্স কোডটি খনন করতে দেখেছি। এবং যেহেতু এর ব্যবহার কখনই ভ্যু'ইংয়ের সঠিক উপায় ছিল না, সম্ভবত এটি ছিটানো যেতে পারে। এটি এখনও আছে কিনা তা নিশ্চিত করে বলতে পারি না, যেহেতু আমি আর ফ্রন্ট-এন্ড করি না।

— বরিস মোসৌনভ

Answer 2

এই থেকে একটি প্রশংসনীয় পরিষ্কার সমাধান মত মনে হয় matthiasg উপর এই সমস্যা :

আপনি :key="someVariableUnderYourControl"যখন পুনঃনির্মাণের উপাদানটি চান তখন আপনি কীটিও ব্যবহার করতে এবং পরিবর্তন করতে পারেন

আমার ব্যবহারের ক্ষেত্রে, আমি প্রোপ হিসাবে কোনও উপাদানগুলিতে একটি ভয়েস গেটরকে খাওয়াতাম। কোনওভাবে ভুেক্স ডেটা আনবে তবে প্রতিক্রিয়াটি নির্ভরযোগ্যভাবে উপাদানটি পুনরায় রেন্ডার করতে সক্ষম হবে না। আমার ক্ষেত্রে, প্রাপগুলিতে keyকিছু বৈশিষ্ট্যের সাথে উপাদানটি সেট করা যখন গ্রাহকরা (এবং বৈশিষ্ট্য) অবশেষে সমাধান হয় তখন রিফ্রেশের গ্যারান্টি দেয়।

Comments

এটি একটি ঝরঝরে ছোট্ট কৌশল, এটি মূলত উপাদানটির পুনরায় ইনস্ট্যান্টেশন বাধ্যতামূলক করে ( mountedচালানো হবে ইত্যাদি)

— বিটি কে

@btk আমি একমত, এটি সম্ভবত "অধিকার 'পথ কিছু করার না, কিন্তু এটি একটি মোটামুটি পরিষ্কার হ্যাক, এটা কি জন্য।

— ব্রায়ান কুং

এই সহায়ক। আমি যখন রুটটি পরিবর্তন করি তখন একই উপাদানটিকে পুনরায় রেন্ডার করতে আমি রুট পূর্ণ পথটি কী হিসাবে ব্যবহার করি। : কী = "$ রুট.ফুলপাথ"

— নীরব গান্ধী

Answer 3

কেন?

... আপনার একটি আপডেট জোর করা প্রয়োজন ?

সম্ভবত আপনি ভিউকে সেরাটি আবিষ্কার করছেন না:

মান পরিবর্তনের ক্ষেত্রে ভ্যুটি স্বয়ংক্রিয়ভাবে প্রতিক্রিয়া দেখাতে অবশ্যই অবজেক্টগুলিকে প্রাথমিকভাবে ঘোষণাdata করতে হবে । অথবা, যদি না হয় তবে সেগুলি অবশ্যই ব্যবহার করে যুক্ত করাVue.set() উচিত ।

নীচে ডেমো মন্তব্য দেখুন। বা এখানে একটি জেএসফিডেলে একই ডেমোটি খুলুন ।

new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Edson'
    }
  },
  methods: {
    changeName() {
      // because name is declared in data, whenever it
      // changes, Vue automatically updates
      this.person.name = 'Arantes';
    },
    changeNickname() {
      // because nickname is NOT declared in data, when it
      // changes, Vue will NOT automatically update
      this.person.nickname = 'Pele';
      // although if anything else updates, this change will be seen
    },
    changeNicknameProperly() {
      // when some property is NOT INITIALLY declared in data, the correct way
      // to add it is using Vue.set or this.$set
      Vue.set(this.person, 'address', '123th avenue.');
      
      // subsequent changes can be done directly now and it will auto update
      this.person.address = '345th avenue.';
    }
  }
})

/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>person.name: {{ person.name }}</span><br>
  <span>person.nickname: {{ person.nickname }}</span><br>
  <span>person.address: {{ person.address }}</span><br>
  <br>
  <button @click="changeName">this.person.name = 'Arantes'; (will auto update because `name` was in `data`)</button><br>
  <button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)</button><br>
  <button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button>
  <br>
  <br>
  For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>

ভিউয়ের এই অংশটি আয়ত্ত করতে, পুনরায় কার্যকারিতা সম্পর্কিত সরকারী দস্তাবেজগুলি দেখুন - সনাক্তকরণ ক্যাভেটগুলি পরিবর্তন করুন । এটা অবশ্যই পড়তে হবে!

Comments

নিশ্চিতভাবেই সম্মত হন যে আপনার এই রিফ্রেশ প্রয়োজনীয়তার বিষয়ে প্রশ্ন করা উচিত, তবে কখনও কখনও আপনার পুনরায় রেন্ডার করার জন্য কেবল ইউআই দরকার কারণ ভিউপোর্টটি পরিবর্তিত হয়েছে এবং আপনাকে বিভিন্ন সম্পদ (একটি উদাহরণ হিসাবে) দেখাতে হবে। তথ্য সম্ভবত পরিবর্তিত হয়নি।

— the_dude_abides

কেন আপনার পুনরায় লোড করা দরকার? কিছু ক্ষেত্রে ব্রাউজারের দ্বারা ক্যাশেড রিসোর্স ফাইলগুলি (স্টাইলশিট / জেএস) একটি নির্দিষ্ট সময়ের পরে পুনরায় লোড করা প্রয়োজন। আমার কাছে একটি স্টাইলশিট ছিল যা 7 দিনের পরে পুনরায় লোড করা দরকার এবং যদি কোনও ব্যবহারকারী কোনও পৃষ্ঠা অ্যাক্সেস সহ একটি ট্যাব খোলা রাখে এবং সেই পৃষ্ঠাটি নেভিগেট করতে 7 দিন পরে ফিরে আসে, সিএসএসটি 7 দিনের বেশি পুরানো ছিল।

— অরওব্রত

অচিয়েলভলকার্ট আপনি সম্ভবত উত্তরটি ইতিমধ্যে খুঁজে পেয়েছেন, তবে হ্যাঁ, Vue.set()এটি উপাদানগুলির ভিতরেও কাজ করে।

— acdcjunior

@ থে_ডুড_বাইডস এবং @ অরব্রত, এগুলি সতেজ করার বৈধ ব্যবহার, আমি সম্মত। আমি যে প্রশ্নটি উত্থাপন করেছি তা হ'ল লোকে খুব কমই ভুল কারণে সতেজ করে না।

— acdcjunior

সম্ভবত আপনি খুব খারাপভাবে ডিজাইন করা ওয়েব অ্যাপ্লিকেশনটিতে একটি বাগ ঠিক করার চেষ্টা করছেন যা ভেন্ডিকে নিখুঁতভাবে একটি রেন্ডারিং সরঞ্জাম হিসাবে ব্যবহার করে এবং উদাহরণস্বরূপ, যখনই সার্ভারে যায় তখন পুরো অ্যাপ্লিকেশনটি পুনরায় লোড করে, ক্লায়েন্ট সাইড অ্যাপ্লিকেশন সক্ষমতাটিকে উপেক্ষা করে। বাস্তব বিশ্বে, আপনার কাছে পাওয়া প্রতিটি ঘৃণা ঠিক করার জন্য আপনার কাছে সময় নেই।

— ওয়ারেন শিশ

Answer 4

দয়া করে এই পড়া http://michaelnthiessen.com/force-re-render/

ভয়াবহ উপায়: পুরো পৃষ্ঠাটি পুনরায় লোড করা ভয়ঙ্কর উপায়:
ভি-ইফ হ্যাক ব্যবহার করে
আরও ভাল উপায়: ভের অন্তর্নির্মিত বাহিনীটি ব্যবহার করে আপলোড পদ্ধতি
সবচেয়ে ভাল উপায়: আপনার উপাদানটিতে কী-পরিবর্তনশীল

<template>
   <component-to-re-render :key="componentKey" />
</template>

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

আমি ঘড়িও ব্যবহার করি: কিছু পরিস্থিতিতে।

Comments

অবশ্যই, আমি আপনার সাথে একমত!

— ডায়মন্ড

আমি প্রায় ভ্যু ছেড়ে দিয়েছি। তবে এর জন্য ধন্যবাদ, ভ্যুতে আমার বিশ্বাস পুনরুদ্ধার করা হয়েছে।

— জোকব

লিঙ্কটি আসলে এটি কীভাবে ভয়ঙ্কর উপায়ে করা যায় তা প্রদর্শন করে না, যা দুর্ভাগ্যক্রমে আমার প্রয়োজন যা আমার অ্যাপটি ভয়ঙ্কর উপায়ে নেভিগেট করার জন্য তৈরি করা হয়েছে। বর্তমান পৃষ্ঠার একটি সাধারণ ইউআরএলটি কাজ করছে বলে মনে হচ্ছে না, আমি যে অ্যাপ্লিকেশনটির সাথে व्यवहार করছি তা অন্ততপক্ষে নয়, সুতরাং এটি কীভাবে ভয়ঙ্কর উপায়ে করা যায় সে সম্পর্কে আমার আসলে নির্দেশাবলীর প্রয়োজন।

— ওয়ারেন শিশ

@WarrenDew অনুসরন করুন: stackoverflow.com/questions/3715047/...

— যশ

Answer 5

this.$router.go(0);বর্তমান পৃষ্ঠাটি ম্যানুয়ালি পুনরায় লোড করতে ব্যবহার করার চেষ্টা করুন ।

Comments

সরল: এটি $ রাউটার.গো ()

— মারিয়াস

আসলে @ মারিয়াসআন্দ্রেইয়ানা - .go () ফাংশনের জন্য 1 অ-

— alচ্ছিক

Answer 6

ব্যবহার vm.$set('varName', value)। চেঞ্জ_ডেটিশন_ ক্যাভেটসের বিবরণ সন্ধান করুন ।

Answer 7

অবশ্যই .. আপনি যেকোন সময় পুনরায় রেন্ডার (বিনোদন) জোর করতে মূল বৈশিষ্ট্যটি ব্যবহার করতে পারেন।

<mycomponent :key="somevalueunderyourcontrol"></mycomponent>

উদাহরণের জন্য https://jsfiddle.net/mgoetzke/epqy1xgf/ দেখুন

এটি এখানেও আলোচনা করা হয়েছিল: https://github.com/vuejs/ ডিসকাসশন / গ্লোবস / 356#issuecomment-336060875

Answer 8

<my-component :key="uniqueKey" />

পাশাপাশি এটি প্রতিটি আপডেটের জন্য অবজেক্ট (আপত্তি) মূল্যে প্রতিটি this.$set(obj,'obj_key',value) আপডেটের uniqueKeyজন্য ব্যবহার এবং আপডেট করেthis.uniqueKey++

এটি আমার পক্ষে এভাবে কাজ করেছিল

Answer 9

সুতরাং আপনি এটি করতে পারেন দুটি উপায় আছে,

1)। আপনি $forceUpdate()আপনার পদ্ধতির হ্যান্ডলারের অভ্যন্তরে ব্যবহার করতে পারেন

<your-component @click="reRender()"></your-component>

<script>
export default {
   methods: {
     reRender(){
        this.$forceUpdate()
     }
   }
}
</script>

2)। আপনি একটি দিতে পারে :keyযখন rerender করতে চান আপনার কম্পোনেন্ট এবং increament করার অ্যাট্রিবিউট

<your-component :key="index" @click="reRender()"></your-component>

<script>
export default {
   data() {
     return {
        index: 1
     }
   },
   methods: {
     reRender(){
        this.index++
     }
   }
}
</script>

Answer 10

ভি-ইফ ডাইরেক্টিভ ব্যবহার করে

<div v-if="trulyvalue">
    <component-here />
 </div>

সুতরাং সহজেই সত্য থেকে সত্যের মানটি মিথ্যা থেকে সত্যে পরিবর্তনের মাধ্যমে ডিভের মধ্যে থাকা উপাদানটিকে আবার রেন্ডার করতে হবে

Comments

আমার মতে উপাদানটি পুনরায় লোড করার এটি সর্বোত্তম উপায়। তৈরি করা () পদ্ধতিতে পর্যাপ্ত পরিমাণে আপনি কিছু সূচনা উপাদান যুক্ত করতে পারেন।

— পাইওটার Octak

Answer 11

পুনরায় লোড / পুনঃ-রেন্ডার / রিফ্রেশ উপাদানটি লম্বা কোডিং বন্ধ করুন। এটি করার একটি ভ্যু.জেএস উপায় আছে।

শুধু :keyবৈশিষ্ট্য ব্যবহার করুন ।

উদাহরণ স্বরূপ:

<my-component :key="unique" />

আমি বিএস ভ্যু টেবিল স্লটে এটি ব্যবহার করছি। বলছি যে আমি এই উপাদানটির জন্য কিছু করব তাই এটি অনন্য করে তুলুন।

Answer 12

এটি আমার পক্ষে কাজ করেছে।

created() {
            EventBus.$on('refresh-stores-list', () => {
                this.$forceUpdate();
            });
        },

অন্যান্য উপাদানগুলি রিফ্রেশ-স্টোর-তালিকার ইভেন্টের ফলে বর্তমান উপাদানটি পুনরায় সরবরাহের কারণ হবে

Answer 13

আমি একটি উপায় খুঁজে পেয়েছি। এটি কিছুটা হ্যাকি কিন্তু কাজ করে।

vm.$set("x",0);
vm.$delete("x");

vmআপনার ভিউ-মডেল অবজেক্টটি কোথায় এবং xঅস্তিত্বের পরিবর্তনশীল।

Vue.js কনসোল লগ এ সম্পর্কে অভিযোগ করবে কিন্তু এটি সমস্ত ডেটা জন্য রিফ্রেশ ট্রিগার করে। 1.0.26 সংস্করণ দিয়ে পরীক্ষা করা হয়েছে।

Answer 14

আমার জন্য কাজ করেছেন

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        '$route'() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }

Answer 15

শুধু এই কোড যুক্ত করুন:

this.$forceUpdate()

গুডলাক

Answer 16

: কী = "$ রুট.প্রেমস.প্রেম 1" আপনার যে কোনও প্যারামের সাথে স্বয়ংক্রিয় পুনরায় লোড করা বাচ্চাদের সাথে কী ব্যবহার করুন ..

Comments

আপনার সমাধান সম্পর্কে বিস্তারিত তথ্য দেওয়ার চেষ্টা করুন। আপনার কোড যুক্ত করুন, কীওয়ার্ডগুলি হাইলাইট করুন

— Agilanbu

Answer 17

আমি একটি ইমেজ গ্যালারী নিয়ে এই সমস্যাটি নিয়েছিলাম যা অন্য ট্যাবে পরিবর্তিত হওয়ার কারণে আমি রেন্ডার করতে চেয়েছিলাম। সুতরাং ট্যাব 1 = চিত্রগ্যালারি, ট্যাব 2 = প্রিয় ছবি

ট্যাব @ চেঞ্জ = "আপডেটগ্যালারি ()" -> প্রতিবার আমি ট্যাবগুলি স্যুইচ করে ফিল্টারড ইমেজ ফাংশনটি প্রক্রিয়াকরণের জন্য আমার ভি-জন্য নির্দেশকে বাধ্য করে।

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tab: null,
      colorFilter: "",
      colors: ["None", "Beige", "Black"], 
      items: ["Image Gallery", "Favorite Images"]
    };
  },
  methods: {
    filteredImages: function() {
      return this.$store.getters.getImageDatabase.filter(img => {
        if (img.color.match(this.colorFilter)) return true;
      });
    },
    updateGallery: async function() {
      // instance is responsive to changes
      // change is made and forces filteredImages to do its thing
      // async await forces the browser to slow down and allows changes to take effect
      await this.$nextTick(function() {
        this.colorFilter = "Black";
      });

      await this.$nextTick(function() {
        // Doesnt hurt to zero out filters on change
        this.colorFilter = "";
      });
    }
  }
};
</script>

Answer 18

দুঃখিত বন্ধুরা, পৃষ্ঠা পুনরায় লোড পদ্ধতি (ঝাঁকুনি দেওয়া) বাদে, তাদের কেউই আমার পক্ষে কাজ করে না (: কী কাজ করে না)।

এবং আমি এই পদ্ধতিটি পুরানো vue.js ফোরাম থেকে পেয়েছি যা আমার পক্ষে কাজ করে:

https://github.com/vuejs/Discussion/issues/356

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {show:true}
        },
        methods:{
            rerender(){
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                    console.log('re-render start')
                    this.$nextTick(() => {
                        console.log('re-render end')
                    })
                })
            }
        }
    }
</script>