इंटरपोल को कैसे हल करना है अंदर की विशेषताओं को हटा दिया गया है। वी-बाइंड या कोलन शॉर्टहैंड का उपयोग करें? Vue.JS 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>

जब निष्पादित किया जाता है, तो इस तरह की त्रुटि होती है:

Vue टेम्पलेट सिंटैक्स त्रुटि:

आईडी = "खरीद - {{मद .id}}": विशेषताओं के अंदर के अंतर्वेशन को हटा दिया गया है। इसके बजाय वी-बाइंड या कोलोन शॉर्टहैंड का उपयोग करें।

मैं इसे कैसे सुलझाऊं?

Answer 1

अंदर जावास्क्रिप्ट कोड का उपयोग करें v-bind(या शॉर्टकट: ""):

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

तथा

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

या यदि ES6 + का उपयोग कर रहे हैं:

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

Comments

किसी भी विचार कैसे एक स्ट्रिंग के बजाय एक वस्तु के लिए यह काम करने के लिए?

— माइक डी क्लार्क

@MikedeKlerk सिर्फ ब्रैकेट को हटा दें: यदि आप किसी ऑब्जेक्ट से बाइंड कर रहे हैं foo, तो v1 सिंटैक्स होगा :my-object="{{ foo }}"और v2 सिंटैक्स होगा :my-object="foo"।

— धन्यवाद 25

<div>टैग के साथ <div :id="'purchase-id-' + item._id">:। उदाहरण प्रतिपादन:<div id="purchase-id-5bb254557e1cef3b4cc40529">

— rprasad

यदि आप मौजूदा विशेषताओं में जोड़ना चाहते हैं तो क्या होगा? उदाहरण के लिए उन्हें अधिलेखित किए बिना कुछ वर्गों को जोड़ सकते हैं?

— एडम रीस

@ AdamReis आपके पास classऔर :classउसी तत्व के लिए हो सकता है । Vue.js दो विशेषता को मर्ज करेगा। वहाँ देखें: jsfiddle.net/eywraw8t/466181 या यदि आप केवल उपयोग करना चाहते हैं :class: jsfiddle.net/eywraw8t/466183

— हैप्पीवान

Answer 2

यदि आप src / आस्तियों के फ़ोल्डर से किसी ऑब्जेक्ट और छवियों से डेटा खींच रहे हैं, तो आपको अपनी ऑब्जेक्ट में आवश्यकता ('संपत्ति / पथ / image.jpeg') शामिल करने की आवश्यकता है जैसे मैंने नीचे किया था।

काम करने का उदाहरण:

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

आपके v-img तत्व में नहीं - काम मत करो

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

Answer 3

विशेषता को बांधने के लिए v-bind या शॉर्टकट सिंटैक्स ':' का उपयोग करें। उदाहरण:

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

Comments

लेकिन क्या कोई कृपया मेरी मदद कर सकता है कि हम प्लेसहोल्डर का उपयोग क्यों नहीं कर सकते हैं = "{{शीर्षक}}"

— सिबशचर पट्टनायक

प्रक्षेप को विशेषताओं से हटा दिया गया है, इसका उपयोग केवल html तत्वों के अंदर किया जाता है

— Radu Di Febă

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 में छवियों को संपीड़ित करेगा, और यह एक प्रतिक्रियाशील चर नहीं है।

अपनी समस्या को हल करने के लिए, आपको अपने सार्वजनिक PATH में अपनी छवियों को सहेजने की आवश्यकता है। आमतौर पर सार्वजनिक पथ "सार्वजनिक" फ़ोल्डर या "स्टेटिक्स" में होता है।

अंत में, आप यह कर सकते हैं:

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

और आपका HTML आप ऐसा कर सकते हैं:

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

सार्वजनिक फ़ोल्डर का उपयोग कब करें

• आपको बिल्ड आउटपुट में एक विशिष्ट नाम के साथ एक फ़ाइल की आवश्यकता है
• फ़ाइल एक प्रतिक्रियाशील चर पर निर्भर करती है जो निष्पादन समय में बदल सकती है
• आपके पास चित्र हैं और उनके रास्तों को गतिशील रूप से संदर्भित करने की आवश्यकता है
• कुछ लाइब्रेरी वेबपैक के साथ असंगत हो सकती है और आपके पास इसे टैग के रूप में शामिल करने के अलावा और कोई विकल्प नहीं है।

अधिक जानकारी: Vue JS प्रलेखन में "HTML और स्टेटिक एसेट्स"