İnterpolasyon içerisindeki özniteliklerin nasıl çözüleceği kaldırıldı. V-bind veya iki nokta üst üste kısaltması mı kullanıyorsunuz? Vue.JS 2

Benim vue bileşenim şöyle:

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

Yürütüldüğünde aşağıdaki gibi bir hata var:

Vue şablonu söz dizimi hatası:

id = "satın alma - {{item.id}}": Özelliklerin içindeki enterpolasyon kaldırıldı. Bunun yerine v-bind veya iki nokta üst üste kısaltmasını kullanın.

Bunu nasıl çözebilirim?

İçinde javascript kodunu kullanın v-bind(veya kısayol ":"):

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

ve

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

Veya ES6 + kullanılıyorsa:

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

Bir nesneden veri ve src / assets klasöründen görüntüler çekiyorsanız , aşağıda yaptığım gibi nesnenize gereksinim ('assets / path / image.jpeg') eklemeniz gerekir .

Çalışma örneği:

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

V-img öğenizde değil - Çalışmayın

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

Özniteliği bağlamak için v-bind veya kısayol sözdizimi ':' kullanın. Misal:

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

Sadece kullan

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

en kolay yol da dosya adresini gerektirmektir :

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

aşağıdaki tam örnek ../assets/logo.png gösterir :

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

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

En zarif çözüm, görüntüleri Webpack'in dışına kaydetmektir. Varsayılan olarak, Webpack görüntüleri base64'te sıkıştırır, bu nedenle görüntüleri varlıklar klasörünüze kaydederseniz bu işe yaramaz çünkü Webpack görüntüleri base64'te sıkıştırır ve bu, reaktif bir değişken ISN'T olur.

Sorununuzu çözmek için resimlerinizi KAMU YOLUNA kaydetmeniz gerekir. Genellikle genel yol "genel" klasörde veya "statik" tir.

Son olarak, bunu yapabilirsiniz:

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

Ve HTML'nizde bunu yapabilirsiniz:

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

Ortak klasör ne zaman kullanılmalı

• Derleme çıktısında belirli bir ada sahip bir dosyaya ihtiyacınız var
• Dosya, yürütme zamanında değişebilen reaktif bir değişkene bağlıdır
• Görüntüleriniz var ve yollarına dinamik olarak başvurmanız gerekiyor
• Bazı kitaplıklar Webpack ile uyumsuz olabilir ve bunu bir etiket olarak eklemekten başka seçeneğiniz yoktur.

DAHA FAZLA BİLGİ: Vue JS belgelerinde "HTML ve Statik Varlıklar"