আমি কি ভ্যু জেজে গণিত বৈশিষ্ট্যে পরামিতিগুলি পাস করতে পারি?

Question

ভ্যু জেজে গণিত বৈশিষ্ট্যে প্যারামিটারটি পাস করা কি সম্ভব? গণিতগুলি ব্যবহার করে গিটার / সেটার থাকাকালীন আমি দেখতে পাচ্ছি, তারা একটি প্যারামিটার নিতে পারে এবং এটি একটি ভেরিয়েবলের জন্য নির্ধারণ করতে পারে। ডকুমেন্টেশন থেকে এখানে পছন্দ করুন :

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

এটিও কি সম্ভব:

// ...
computed: {
  fullName: function (salut) {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}
// ...

যেখানে গণিত সম্পত্তি আর্গুমেন্ট নেয় এবং পছন্দসই আউটপুট ফেরত দেয়। তবে আমি যখন এটি চেষ্টা করি তখন আমি এই ত্রুটিটি পাচ্ছি:

vue.common.js: 2250 আনকচড প্রকারের ত্রুটি: ফুলনাম কোনও ফাংশন নয় (…)

আমি কি এই জাতীয় ক্ষেত্রে ব্যবহার করা উচিত?

Comments

না, আপনি গণিত বৈশিষ্ট্যে প্যারামিটারগুলি পাস করতে পারবেন না। হ্যাঁ, পদ্ধতি ব্যবহার করা এটি করার সহজতম উপায়।

— শনিবার

Answer 1

সম্ভবত আপনি একটি পদ্ধতি ব্যবহার করতে চান

<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`
  }
}

---

দীর্ঘ ব্যাখ্যা

প্রযুক্তিগতভাবে আপনি এরকম একটি প্যারামিটার সহ একটি গণিত সম্পত্তি ব্যবহার করতে পারেন:

computed: {
   fullName() {
      return salut => `${salut} ${this.firstName} ${this.lastName}`
   }
}

(এর Unirgyজন্য বেস কোডের জন্য ধন্যবাদ ।)

একটি গণিত সম্পত্তি এবং একটি পদ্ধতির মধ্যে পার্থক্য হ'ল গণনা করা বৈশিষ্ট্যগুলি ক্যাশ করা হয় এবং কেবল যখন তাদের নির্ভরতা পরিবর্তিত হয়। একটি পদ্ধতি যতবার ডাকে ততবার মূল্যায়ন করবে ।

আপনার যদি প্যারামিটারগুলির প্রয়োজন হয় তবে সাধারণত কোনও ক্ষেত্রে কোনও পদ্ধতির মাধ্যমে গণিত সম্পত্তি ফাংশনটি ব্যবহার করার কোনও সুবিধা নেই। যদিও এটি আপনাকে প্যারামেট্রাইজড গেটর ফাংশনটি ভ্যু উদাহরণের সাথে আবদ্ধ করতে দেয়, আপনি সেখানে ক্যাচ হারাবেন যাতে আসলে কোনও লাভ হয় না, বাস্তবে আপনি প্রতিক্রিয়াটি (এএফএআইইউ) ভেঙে ফেলতে পারেন। আপনি ভ্যু ডকুমেন্টেশন https://vuejs.org/v2/guide/computes.html# Compomp-- ক্যাচিং-vs- ম্যাথডগুলিতে এ সম্পর্কে আরও পড়তে পারেন

শুধুমাত্র দরকারী অবস্থা আপনি যখন আছে একটি সংগ্রহকারী ব্যবহার এবং তা parametrized থাকতে হবে। এই পরিস্থিতি উদাহরণস্বরূপ ভেক্সে ঘটে । ভেক্সে এটি স্টোর থেকে সিঙ্ক্রোনালি প্যারামিটারাইজড ফলাফল পাওয়ার একমাত্র উপায় (ক্রিয়াগুলি অ্যাসিঙ্ক হয়)। সুতরাং এই পদ্ধতিটি তার ভেটের্সের জন্য ভিউক্স ডকুমেন্টেশন দ্বারা তালিকাভুক্ত করা হয়েছে https://vuex.vuejs.org/guide/getters.html#method-style-access

Comments

<span v-text="fullName('Hi')"></span>পরিবর্তে ব্যবহার করে, এছাড়াও কাজ করে।

— সালচিপাপা

ইস্যুটি হ'ল <span :text="message"></span>, ভ্যু ২.০-র জন্য আর কাজ করা হয় না, তার পরিবর্তে একজনকে ব্যবহার করতে হবে: <span v-text="message"></span>বা <span>{{ message }}</span>এই কোডেপেনের মতো দেখানো হয়েছে: codepen.io/Ismael-VC/pen/dzGzJa

— সালচিপাপা

তুমি ঠিক বলছো. আমি লক্ষ্য করি না এটি 2.0 তে পরিবর্তিত হয়েছে। সংশোধনীর জন্য ধন্যবাদ!

— ড্যামিয়েনিক্স

গণিত বৈশিষ্ট্যগুলি ES5 গেটর সিনট্যাক্স ব্যবহার করে যা কোনও প্যারামিটারের সাথে এটি কল করা সমর্থন করে না (কোনও বন্ধনী নেই)। সুতরাং এটি একটি ভাষা-স্তরের সীমাবদ্ধতা এবং সেভাবেই এটি Vue.js. এ অন্তর্ভুক্ত করা হয়েছে

— দামিনিক্স

@ পেড্রোমুরিরা খুব দেরিতে সাড়া পাওয়ার জন্য দুঃখিত, আমি এটি বিশ্লেষণ করার জন্য কিছু সময় পেয়েছি। প্রকৃতপক্ষে আপনি ঠিক বলেছেন যে আমি যা লিখেছি তা পরিষ্কার এবং মিশ্র ছিল না :) আমি উত্তরটি স্থির করেছি এবং আরও স্পষ্ট এবং নির্ভুল করার জন্য এটি পুনরায় ব্যাখ্যা করার জন্য যথাসাধ্য করেছি। এটি এখন পরিষ্কার থাকলে আপনি আমাকে জানাতে পারেন। ধন্যবাদ।

— ড্যামিয়েনিক্স

Answer 2

আপনি পদ্ধতিগুলি ব্যবহার করতে পারেন, তবে আমি পদ্ধতিগুলির পরিবর্তে গণিত বৈশিষ্ট্যগুলি ব্যবহার করতে পছন্দ করি, যদি তারা ডেটা পরিবর্তন না করে বা বাহ্যিক প্রভাব না রাখে।

আপনি গণিত বৈশিষ্ট্যগুলিতে এইভাবে যুক্তিগুলি পাস করতে পারেন (ডকুমেন্টেড নয়, তবে রক্ষণাবেক্ষণকারীদের দ্বারা প্রস্তাবিত, কোথায় মনে রাখবেন না):

computed: {
   fullName: function () {
      var vm = this;
      return function (salut) {
          return salut + ' ' + vm.firstName + ' ' + vm.lastName;  
      };
   }
}

সম্পাদনা: দয়া করে এই সমাধানটি ব্যবহার করবেন না, এটি কেবল কোনও সুবিধা ছাড়াই কোডটিকে জটিল করে তোলে।

Comments

আপনি যদি কোনও রেফারেন্স সরবরাহ করতে পারেন তবে এটি সত্যিই সহায়ক হবে। এই কাজ করা উচিত.

— সৌরভ

@ সৌরভ দুঃখিত, এটি গিথুব-এ সত্যই বর্ণনামূলক সমস্যাটির সমাধান ছিল এবং আমি এখনই এটি খুঁজে পাচ্ছি না ...

— Unirgy

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

— নেট রিটার

এটি কীভাবে পরিচালনা করে? প্যারামিটার পরিবর্তন হলে এটি কি সঠিকভাবে কাজ করবে?

— দামিনিক্স

আমি বিশ্বাস করি না যে এটি রিটার্ন ফাংশনের অভ্যন্তরে কিছু ক্যাশে করবে। পদ্ধতিগুলির পার্থক্যটি

— নিখুঁতভাবে

Answer 3

ঠিক আছে, প্রযুক্তিগতভাবে বলতে গেলে আমরা একটি গণিত ফাংশনটিতে একটি প্যারামিটারটি পাস করতে পারি, একইভাবে আমরা ভ্যুসে একটি গেটর ফাংশনে একটি প্যারামিটারটি পাস করতে পারি। যেমন একটি ফাংশন একটি ফাংশন যা একটি ফাংশন ফেরত।

উদাহরণস্বরূপ, একটি দোকানে যাত্রীদের মধ্যে:

{
  itemById: function(state) {
    return (id) => state.itemPool[id];
  }
}

এই গিটারটি কোনও উপাদানগুলির গণিত ফাংশনগুলিতে ম্যাপ করা যায়:

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ])
}

এবং আমরা আমাদের টেমপ্লেটে নিম্নে এই গণিত ফাংশনটি ব্যবহার করতে পারি:

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>

প্যারামিটার লাগে এমন একটি গণিত পদ্ধতি তৈরি করতে আমরা একই পদ্ধতির প্রয়োগ করতে পারি।

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ]),
  descriptionById: function() {
    return (id) => this.itemById(id).description;
  }
}

এবং আমাদের টেমপ্লেটে এটি ব্যবহার করুন:

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>

এটি বলা হচ্ছে, আমি এখানে বলছি না যে ভ্যুর সাথে জিনিসগুলি করার এটি সঠিক উপায়।

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

Comments

ওহ তাই এটি আমার জন্য কাজ করেছে, ভেক্স ব্যবহার করে না। এটিও জানতে চাইবেন যে এটি গণনা করা বৈশিষ্ট্যগুলি করার কোনও বৈধ উপায়।

— হ্যাডডিকসন

যদিও এটি কাজ করে, এটি মূলত গণনার সম্পত্তিটিকে একটি পদ্ধতির মতোই আচরণ করে। অর্থাত্ এটি একটি গণনা করা সম্পত্তির ক্যাশিং সুবিধাগুলি হারায়। সুতরাং, কোনও পদ্ধতিতে এটি ব্যবহার করে প্রকৃত লাভ নেই। "নোট করুন যে পদ্ধতিগুলির মাধ্যমে অ্যাক্সেস প্রাপ্তরা প্রতিটি সময় আপনি তাদের কল করার সময় চলবে, এবং ফলাফলটি ক্যাশে করা হয়নি" " দেখুন vuex.vuejs.org/en/getters.html

— জেমস

@ james.brndwgn তবে আমি নিশ্চিত যে অন্তর্নিহিত ডেটা পরিবর্তিত হলে পদ্ধতিগুলি পুনরায় চালু হবে না pretty আমি সত্যিই এটি খুঁজছি।

— অ্যালেক্স

@ অ্যালেক্স তারপরে আপনার একজন প্রহরী ব্যবহার করা উচিত। vuejs.org/v2/guide/computes.html# ওয়াচচার্স

— জেমস

@ james.brndwgn আমি যদি সম্ভব হয় তবে আমি কোনও প্রহরী অপেক্ষা একটি গণিত সম্পত্তি ব্যবহার করব। আমি কেবলমাত্র আপনার বক্তব্যটিই নিয়েছিলাম: "সুতরাং, কোনও পদ্ধতিতে এটি ব্যবহার করে আসল লাভ হয় না।" এমনকি ক্যাশে না করেও একটি উল্লেখযোগ্য পার্থক্য রয়েছে।

— অ্যালেক্স

Answer 4

ফিল্টার ভ্যু উপাদানগুলির দ্বারা সরবরাহিত একটি কার্যকারিতা যা আপনাকে আপনার টেমপ্লেট গতিশীল ডেটার যে কোনও অংশে ফর্ম্যাটিং এবং ট্রান্সফরমেশন প্রয়োগ করতে দেয়।

তারা কোনও উপাদানগুলির ডেটা বা কোনও কিছু পরিবর্তন করে না, তবে তারা কেবল আউটপুটকেই প্রভাবিত করে।

বলুন আপনি একটি নাম মুদ্রণ করছেন:

new Vue({
  el: '#container',
  data() {
    return {
      name: 'Maria',
      lastname: 'Silva'
    }
  },
  filters: {
    prepend: (name, lastname, prefix) => {
      return `${prefix} ${name} ${lastname}`
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container">
  <p>{{ name, lastname | prepend('Hello') }}!</p>
</div>

একটি ফিল্টার প্রয়োগ করতে সিনট্যাক্সটি লক্ষ্য করুন, যা | filterName। আপনি যদি ইউনিক্সের সাথে পরিচিত হন তবে এটিই ইউনিক্স পাইপ অপারেটর, যা পরেরটিতে একটি ইনপুট হিসাবে কোনও অপারেশন আউটপুট পাস করতে ব্যবহৃত হয়।

উপাদানটির ফিল্টার বৈশিষ্ট্য একটি অবজেক্ট। একটি একক ফিল্টার একটি ফাংশন যা কোনও মান গ্রহণ করে এবং অন্য মানটি দেয়।

প্রত্যাবর্তিত মান হ'ল এটিই Vue.js টেম্পলেটে মুদ্রিত।

Answer 5

আপনি কোনও ফাংশন ফিরে এসে গেটারদের পক্ষে যুক্তিগুলিও পাস করতে পারেন। এটি বিশেষত কার্যকর যখন আপনি স্টোরটিতে একটি অ্যারের জিজ্ঞাসা করতে চান:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

নোট করুন যে পদ্ধতিগুলির মাধ্যমে অ্যাক্সেস প্রাপ্তরা প্রতিটি সময় আপনি তাদের কল করার সময় চলবে, এবং ফলাফলটি ক্যাশে করা হয়নি।

এটিকে মেথড-স্টাইল অ্যাক্সেস বলা হয় এবং এটি ভ্যু.জেএস ডক্সে নথিভুক্ত হয় ।

Answer 6

আপনি প্যারামিটারগুলি পাস করতে পারেন তবে এটি কোনও vue.js উপায় নয় বা আপনি যেভাবে করছেন সেটি ভুল।

তবে এমন কিছু ক্ষেত্রে আছে যখন আপনাকে এটি করা দরকার I আমি আপনাকে গেটর এবং সেটার ব্যবহার করে গণিত সম্পত্তিতে মান পাস করার একটি সাধারণ উদাহরণ দেখাব।

<template>
    <div>
        Your name is {{get_name}} <!-- John Doe at the beginning -->
        <button @click="name = 'Roland'">Change it</button>
    </div>
</template>

এবং স্ক্রিপ্ট

export default {
    data: () => ({
        name: 'John Doe'
    }),
    computed:{
        get_name: {
            get () {
                return this.name
            },
            set (new_name) {
                this.name = new_name
            }
        },
    }    
}

বোতামটি ক্লিক করা হলে আমরা 'রোল্যান্ড' নামে এবং মধ্যে গুনিত সম্পত্তিতে যাচ্ছি set() যাচ্ছি আমরা 'জন দো' থেকে 'রোল্যান্ড' নাম পরিবর্তন করছি।

নীচে একটি সাধারণ ব্যবহারের কেস পাওয়া যায় যখন গেটর এবং সেটারের সাথে গণনা করা হয়। বলুন যে আপনার ফলো ভ্যূক্স স্টোর রয়েছে:

export default new Vuex.Store({
  state: {
    name: 'John Doe'
  },
  getters: {
    get_name: state => state.name
  },
  mutations: {
    set_name: (state, payload) => state.name = payload
  },
})

এবং আপনার উপাদানটিতে আপনি v-modelএকটি ইনপুট যুক্ত করতে চান তবে ভ্যুেক্স স্টোরটি ব্যবহার করে।

<template>
    <div>
        <input type="text" v-model="get_name">
        {{get_name}}
    </div>
</template>
<script>
export default {
    computed:{
        get_name: {
            get () {
                return this.$store.getters.get_name
            },
            set (new_name) {
                this.$store.commit('set_name', new_name)
            }
        },
    }    
}
</script>

Answer 7

আপনি কী অর্জন করতে চাইছেন তা আমি পুরোপুরি নিশ্চিত নই তবে দেখে মনে হচ্ছে আপনি গণনার পরিবর্তে পদ্ধতিটি ব্যবহার করে পুরোপুরি ভাল হয়ে যাবেন!

Answer 8

computed: {
  fullName: (app)=> (salut)=> {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}

আপনি যখন ব্যবহার করতে চান

<p>{{fullName('your salut')}}</p>

Answer 9

গণিত একটি ফাংশন বিবেচনা করা যেতে পারে। সুতরাং ভ্যালিডিয়েশনের উদাহরণ হিসাবে আপনি পরিষ্কারভাবে কিছু করতে পারেন:

    methods: {
        validation(attr){
            switch(attr) {
                case 'email':
                    const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                    return re.test(this.form.email);
                case 'password':
                    return this.form.password.length > 4
            }
        },
        ...
    }

যা আপনি এর মতো ব্যবহার করবেন:

  <b-form-input
            id="email"
            v-model="form.email"
            type="email"
            :state="validation('email')"
            required
            placeholder="Enter email"
    ></b-form-input>

কেবল মনে রাখবেন যে আপনি এখনও গণনার জন্য নির্দিষ্ট ক্যাশেটি মিস করবেন।

Answer 10

হ্যাঁ পদ্ধতিগুলি প্যারাম ব্যবহারের জন্য রয়েছে। উপরে বর্ণিত উত্তরের মতো, উদাহরণস্বরূপ কার্যকর করা খুব হালকা হওয়ায় আপনার উদাহরণে পদ্ধতি ব্যবহার করা ভাল।

শুধুমাত্র রেফারেন্সের জন্য, পদ্ধতিটি জটিল এবং ব্যয় বেশি এমন পরিস্থিতিতে আপনি ফলাফলগুলি যেমন ক্যাশে করতে পারেন:

data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}

দ্রষ্টব্য: এটি ব্যবহার করার সময়, হাজার হাজারের সাথে ডিল করলে মেমরির জন্য নজর রাখুন