Cách giải quyết Nội suy các thuộc tính bên trong đã bị loại bỏ. Sử dụng v-bind hay viết tắt dấu hai chấm? Vue.JS 2

Thành phần vue của tôi như thế này:

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

Khi thực thi, có một lỗi như sau:

Lỗi cú pháp mẫu Vue:

id = "buy - {{item.id}}": Nội suy các thuộc tính bên trong đã bị loại bỏ. Thay vào đó, hãy sử dụng v-bind hoặc dấu hai chấm.

Làm thế nào tôi có thể giải quyết nó?

Sử dụng mã javascript bên trong v-bind(hoặc phím tắt ":"):

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

và

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

Hoặc nếu sử dụng ES6 +:

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

Nếu bạn đang lấy dữ liệu từ một đối tượng và hình ảnh từ thư mục src / asset, bạn cần phải bao gồm request ('asset / path / image.jpeg') vào đối tượng của mình như tôi đã làm dưới đây.

Ví dụ làm việc:

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

Không có trong phần tử v-img của bạn - Không hoạt động

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

Sử dụng v-bind hoặc cú pháp phím tắt ':' để liên kết thuộc tính. Thí dụ:

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

Chỉ dùng

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

cách dễ nhất là yêu cầu địa chỉ tệp :

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

đầy đủ ví dụ dưới đây cho thấy ../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>

Giải pháp thanh lịch nhất là lưu hình ảnh bên ngoài Webpack. Theo mặc định, Webpack nén hình ảnh trong base64, vì vậy nếu bạn lưu hình ảnh trong thư mục nội dung của mình, điều đó không hoạt động vì Webpack sẽ nén hình ảnh trong base64 và IS KHÔNG PHẢI là một biến phản ứng.

Để giải quyết vấn đề của bạn, bạn cần lưu hình ảnh của mình trong PATH CÔNG KHAI. Thông thường đường dẫn công khai nằm trong thư mục "công cộng" hoặc "tĩnh".

Cuối cùng, bạn có thể làm điều này:

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

Và HTML của bạn, bạn có thể làm điều này:

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

Khi nào sử dụng thư mục chung

• Bạn cần một tệp có tên cụ thể trong đầu ra bản dựng
• Tệp phụ thuộc vào một biến phản ứng có thể thay đổi trong thời gian thực thi
• Bạn có hình ảnh và cần tham chiếu động các đường dẫn của chúng
• Một số thư viện có thể không tương thích với Webpack và bạn không có lựa chọn nào khác ngoài việc đưa nó vào làm thẻ.

THÔNG TIN THÊM: "HTML và Tài sản tĩnh" trong tài liệu Vue JS