কীভাবে ইন্টারপোলেশনটির অভ্যন্তরের বৈশিষ্ট্যগুলি সমাধান করা যায় তা সরানো হয়েছে। ভি-বাইন্ড বা কোলন শর্টহ্যান্ড ব্যবহার করবেন? ভ্যু.জেএস 2

Question

আমার মান উপাদানটি এরকম:

    <template>
        <div>
            <div class="panel-group" v-for="item in list">
                ...
                <div class="panel-body">
                    <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
                        Show
                    </a>
                </div>
                <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
                ...
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            ...
            computed: {
                list: function() {
                    return this.$store.state.transaction.list
                },
                ...
            }
        }
    </script>

মৃত্যুদন্ড কার্যকর করার সময়, এর মতো ত্রুটি উপস্থিত রয়েছে:

মান টেম্পলেট সিনট্যাক্স ত্রুটি:

আইডি = "ক্রয় - purchase {আইটেম.আইডি}}": বৈশিষ্ট্যের অভ্যন্তরে বিরক্তি সরানো হয়েছে। পরিবর্তে ভি-বাইন্ড বা কোলন শর্টহ্যান্ড ব্যবহার করুন।

আমি কিভাবে এটা সমাধান করতে পারে?

Answer 1

জাভাস্ক্রিপ্ট কোড ব্যবহার করুন v-bind(বা শর্টকাট ":"):

:href="'#purchase-' + item.id"

এবং

:id="'purchase-' + item.id"

অথবা যদি ES6 + ব্যবহার করে:

:id="`purchase-${item.id}`"

Comments

কোনও ধারণা কীভাবে কোনও স্ট্রিংয়ের পরিবর্তে কোনও বস্তুর জন্য এই কাজটি করবেন?

— মাইক ডি ক্লার্ক

@ মাইকেডে ক্লার্ক কেবল বন্ধনীগুলি সরিয়ে ফেলুন: আপনি যদি কোনও বস্তুর সাথে আবদ্ধ হন fooতবে :my-object="{{ foo }}"ভি 1 বাক্য গঠন এবং ভি 2 সিন্ট্যাক্স হবে :my-object="foo"।

— ই

সঙ্গে <div>ট্যাগ: <div :id="'purchase-id-' + item._id">। উদাহরণ উপস্থাপনা:<div id="purchase-id-5bb254557e1cef3b4cc40529">

— rprasad

আপনি যদি বিদ্যমান বৈশিষ্ট্যগুলিতে যুক্ত করতে চান তবে কী হবে? যেমন ওভাররাইট না করে কিছু ক্লাস যুক্ত করুন?

— অ্যাডাম রেইস

@ অ্যাডাম রিস আপনার থাকতে পারে classএবং :classএকই উপাদানটির জন্য। Vue.js দুটি গুণকে একত্রিত করবে। সেখানে দেখুন: jsfiddle.net/eywraw8t/466181 বা আপনি যদি কেবল ব্যবহার করতে চান :class: jsfiddle.net/eywraw8t/466183

— হ্যাপিরিওয়ান

Answer 2

যদি আপনি কোনও বস্তু এবং এসসিআর / সম্পদ ফোল্ডার থেকে চিত্রগুলি থেকে ডেটা টানছেন তবে আপনাকে নীচের মতো করে আপনার অবজেক্টে প্রয়োজনীয় ('সম্পদ / পথ / চিত্র.jpeg') অন্তর্ভুক্ত করতে হবে ।

কাজের উদাহরণ:

people: [
  {
    name: "Name",
    description: "Your Description.",
    closeup: require("../assets/something/absolute-black/image.jpeg"),
  },

আপনার ভি-ইমগ এলিমেন্টে নেই - কাজ করবেন না

<v-img :src="require(people.closeup)"></v-img>

Answer 3

অ্যাট্রিবিউটটি আবদ্ধ করতে v-bind বা শর্টকাট সিনট্যাক্স ':' ব্যবহার করুন। উদাহরণ:

<input v-bind:placeholder="title">
<input :placeholder="title">

Comments

তবে কেউ কি দয়া করে আমাকে সহায়তা করতে পারেন কেন আমরা স্থানধারক = "{{শিরোনাম}}" ব্যবহার করতে পারি না

— সিবাশ্রিত পট্টনায়েক

গুণাবলি থেকে ইন্টারপোলেশন সরানো হয়েছে, এটি এখন কেবলমাত্র HTML উপাদানগুলির মধ্যেই ব্যবহৃত হয়

— Radu Diță

Answer 4

শুধু ব্যবহার

:src="`img/profile/${item.photo}`"

Answer 5

সবচেয়ে সহজ উপায় ফাইল ঠিকানা প্রয়োজন :

<img v-bind:src="require('../image-address/' + image_name)" />

নিচের সম্পূর্ণ উদাহরণগুলি দেখায় ../assets/logo.png:

<template>
          <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
export default {
  name: "component_name",
  data: function() {
    return {
      img: "logo.png"
    };
  }
};
</script>

Answer 6

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

আপনার সমস্যা সমাধানের জন্য আপনাকে আপনার পাবলিক পাঠে আপনার চিত্রগুলি সংরক্ষণ করতে হবে। সাধারণত পাবলিক পাথ "পাবলিক" ফোল্ডার বা "স্ট্যাটিক্স" এ থাকে।

অবশেষে, আপনি এটি করতে পারেন:

data(){
  return {
    image: 1,
    publicPath: process.env.BASE_URL
  }
}

এবং আপনার এইচটিএমএল আপনি এটি করতে পারেন:

<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">

সর্বজনীন ফোল্ডারটি কখন ব্যবহার করবেন

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

আরও তথ্য: ভিয়ে জেএস ডকুমেন্টেশনে "এইচটিএমএল এবং স্ট্যাটিক সম্পদ"