วิธีแก้การแก้ไข Interpolation ภายในแอตทริบิวต์ถูกลบออก ใช้ v-bind หรือโคลอนชวเลข? Vue.JS 2

ส่วนประกอบ vue ของฉันเป็นดังนี้:

    <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 = "purchase - {{item.id}}": การแก้ไขภายในแอตทริบิวต์ถูกลบออก ใช้ v-bind หรือโคลอนชวเลขแทน

จะแก้ได้อย่างไร?

ใช้รหัสจาวาสคริปต์ภายในv-bind(หรือทางลัด ":"):

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

และ

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

หรือถ้าใช้ ES6 +:

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

หากคุณกำลังดึงข้อมูลจากออบเจ็กต์และรูปภาพจากโฟลเดอร์ src / assets คุณต้องรวมrequire ('assets / path / 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>

ใช้ v-bind หรือทางลัดไวยากรณ์ ':' เพื่อผูกแอตทริบิวต์ ตัวอย่าง:

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

เพียงแค่ใช้

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

วิธีที่ง่ายที่สุดคือต้องการที่อยู่ไฟล์ด้วย :

<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>

วิธีแก้ปัญหาที่หรูหราที่สุดคือบันทึกภาพนอก Webpack ตามค่าเริ่มต้น Webpack จะบีบอัดรูปภาพใน base64 ดังนั้นหากคุณบันทึกรูปภาพในโฟลเดอร์ assets จะไม่ได้ผลเนื่องจาก Webpack จะบีบอัดรูปภาพใน base64 และนั่นไม่ใช่ตัวแปรรีแอคทีฟ

ในการแก้ปัญหาของคุณคุณต้องบันทึกภาพของคุณในเส้นทางสาธารณะของคุณ โดยปกติเส้นทางสาธารณะจะอยู่ในโฟลเดอร์ "สาธารณะ" หรือ "สถิติ"

สุดท้ายคุณสามารถทำได้:

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

และ HTML ของคุณคุณสามารถทำได้:

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

เมื่อใดควรใช้โฟลเดอร์สาธารณะ

• คุณต้องมีไฟล์ที่มีชื่อเฉพาะในเอาต์พุตบิลด์
• ไฟล์ขึ้นอยู่กับตัวแปรปฏิกิริยาที่สามารถเปลี่ยนแปลงเวลาดำเนินการได้
• คุณมีรูปภาพและจำเป็นต้องอ้างอิงเส้นทางแบบไดนามิก
• ไลบรารีบางแห่งอาจเข้ากันไม่ได้กับ Webpack และคุณไม่มีตัวเลือกอื่นนอกจากรวมไว้เป็นแท็ก

ข้อมูลเพิ่มเติม: "HTML และ Static Assets" ในเอกสาร Vue JS