Usunięto sposób rozwiązywania interpolacji wewnątrz atrybutów. Użyć v-bind lub skrótu dwukropka? Vue.JS 2

99

Mój komponent vue wygląda tak:

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

Po uruchomieniu występuje taki błąd:

Błąd składni szablonu Vue:

id = "zakup - {{item.id}}": Interpolacja wewnątrz atrybutów została usunięta. Zamiast tego użyj v-bind lub skrótu dwukropka.

Jak mogę to rozwiązać?

samuel toh
źródło

Odpowiedzi:

189

Użyj kodu javascript wewnątrz v-bind(lub skrótu „:”):

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

i

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

Lub jeśli używasz ES6 +:

:id="`purchase-${item.id}`"
Happyriwan
źródło
Masz jakiś pomysł, jak sprawić, by to działało dla obiektu zamiast ciągu?
Mike de Klerk
@MikedeKlerk po prostu usuń nawiasy: jeśli tworzysz powiązanie z obiektem foo, składnia v1 byłaby, :my-object="{{ foo }}"a składnia v2 byłaby :my-object="foo".
dziękuję
z <div>tagiem: <div :id="'purchase-id-' + item._id">. Przykład renderowania:<div id="purchase-id-5bb254557e1cef3b4cc40529">
rprasad
1
Co jeśli chcesz dodać do istniejących atrybutów? Np. Dołączyć niektóre klasy bez ich nadpisywania?
Adam Reis
3
@AdamReis możesz mieć classi :classdla tego samego elementu. Vue.js połączy te dwa atrybuty. Zobacz tam: jsfiddle.net/eywraw8t/466181 Lub jeśli chcesz używać tylko :class: jsfiddle.net/eywraw8t/466183
Happyriwan
5

Jeśli pobierasz dane z obiektu i obrazy z folderu src / asset, musisz dołączyć do obiektu require ('asset / path / image.jpeg'), tak jak to zrobiłem poniżej.

Przykład pracy:

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

Nie w Twoim elemencie v-img - nie pracuj

<v-img :src="require(people.closeup)"></v-img>
Jason
źródło
4

Użyj v-bind lub skrótu składni „:”, aby powiązać atrybut. Przykład:

<input v-bind:placeholder="title">
<input :placeholder="title">
Sibashrit Pattnaik
źródło
Ale czy ktoś może mi pomóc, dlaczego nie możemy użyć
symbolu
interpolacja została usunięta z atrybutów, jest teraz używana tylko w elementach html
Radu Diță
2

Po prostu użyj

:src="`img/profile/${item.photo}`"
Mahedi Hasan Durjoy
źródło
0

Najprościej też wymagać adresu pliku :

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

pełny przykład poniżej przedstawia ../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>
sina
źródło
0

Najbardziej eleganckim rozwiązaniem jest zapisywanie obrazów poza Webpack. Domyślnie Webpack kompresuje obrazy w base64, więc jeśli zapisujesz obrazy w folderze zasobów, to nie działa, ponieważ Webpack kompresuje obrazy w base64, a to NIE JEST zmienną reaktywną.

Aby rozwiązać problem, musisz zapisać swoje obrazy w PUBLIC PATH. Zwykle ścieżka publiczna znajduje się w folderze „publicznym” lub „statycznym”.

Wreszcie możesz to zrobić:

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

A Twój HTML możesz to zrobić:

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

Kiedy używać folderu publicznego

  • Potrzebujesz pliku o określonej nazwie w danych wyjściowych kompilacji
  • Plik zależy od zmiennej reaktywnej, która może zmieniać się w czasie wykonywania
  • Masz obrazy i musisz dynamicznie odnosić się do ich ścieżek
  • Niektóre biblioteki mogą być niekompatybilne z Webpack i nie masz innego wyjścia, jak tylko dołączyć ją jako tag.

WIĘCEJ INFORMACJI: „HTML i zasoby statyczne” w dokumentacji Vue JS

Joan Galmés Riera
źródło