Як вирішити інтерполяцію всередині атрибутів, видалено. Використовувати v-bind або скорочення двокрапки? Vue.JS 2


99

Мій компонент 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 або скорочення двокрапки.

Як я можу це вирішити?

Відповіді:


189

Використовуйте код javascript всередині v-bind (або ярлик ":"):

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

і

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

Або якщо використовується ES6 +:

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

Будь-яка ідея, як зробити так, щоб це працювало для об’єкта, а не для рядка?
Mike de Klerk

@MikedeKlerk просто видаляє дужки: якщо ви прив'язуєте об'єкт foo, синтаксис v1 буде, :my-object="{{ foo }}"а синтаксис v2 буде :my-object="foo".
подяка

з <div>тегом: <div :id="'purchase-id-' + item._id">. Приклад візуалізації:<div id="purchase-id-5bb254557e1cef3b4cc40529">
rprasad

1
Що робити, якщо ви хочете додати до існуючих атрибутів? Наприклад, додати деякі класи, не перезаписуючи їх?
Адам Рейс

3
@AdamReis ви можете мати classі :classдля того самого елемента. Vue.js об’єднає два атрибути. Дивіться там: jsfiddle.net/eywraw8t/466181 Або якщо ви хочете використовувати лише :class: jsfiddle.net/eywraw8t/466183
Happyriwan

5

Якщо ви витягуєте дані з об'єкта та зображення з папки 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>

4

Використовуйте синтаксис v-bind або ярлик ':' для прив'язки атрибута. Приклад:

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

Але чи може хтось допомогти мені, чому ми не можемо використовувати placeholder = "{{title}}"
Sibashrit Pattnaik

інтерполяція була вилучена з атрибутів, вона використовується лише всередині елементів html зараз
Раду Діша


0

найпростіший спосіб - занадто вимагати адресу файлу :

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

0

Найелегантніше рішення - це збереження зображень за межами Webpack. За замовчуванням Webpack стискає зображення в base64, тому, якщо ви зберігаєте зображення в папці ваших ресурсів, це не працює, оскільки Webpack буде стискати зображення в base64, і це НЕ реактивна змінна.

Щоб вирішити вашу проблему, вам потрібно зберегти ваші зображення у вашому PUBLIC PATH. Зазвичай загальнодоступний шлях знаходиться в "загальній" папці або "статиці".

Нарешті, ви можете зробити це:

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

І ваш HTML ви можете зробити це:

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

Коли використовувати загальну папку

  • Вам потрібен файл із певним іменем у вихідних даних збірки
  • Файл залежить від реактивної змінної, яка може змінюватися під час виконання
  • У вас є зображення, і вам потрібно динамічно посилатися на їхні шляхи
  • Деяка бібліотека може бути несумісна з Webpack, і у вас немає іншого вибору, крім як включити її як тег.

БІЛЬШЕ ІНФОРМАЦІЇ: "HTML та статичні ресурси" у документації Vue JS

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.