Как решить Интерполяцию внутри атрибутов удалено. Использовать v-bind или сокращенное обозначение двоеточия? Vue.JS 2


100

Мой компонент 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 = "закупка - {{item.id}}": интерполяция внутри атрибутов удалена. Вместо этого используйте v-bind или сокращенное обозначение двоеточия.

Как я могу это решить?

Ответы:


189

Используйте код javascript внутри v-bind(или ярлык ":"):

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

а также

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

Или при использовании ES6 +:

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

Есть идеи, как сделать это для объекта, а не для строки?
Майк де Клерк,

@MikedeKlerk просто удалите скобки: если вы привязываетесь к объекту foo, синтаксис v1 будет таким, :my-object="{{ foo }}"а синтаксис v2 будет :my-object="foo".
поблагодарил

с <div>тегом: <div :id="'purchase-id-' + item._id">. Пример рендеринга:<div id="purchase-id-5bb254557e1cef3b4cc40529">
rprasad 01

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}}"
Сибашрит Паттнаик

интерполяция была удалена из атрибутов, теперь она используется только внутри элементов html
Radu


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, а это НЕ реактивная переменная.

Чтобы решить вашу проблему, вам необходимо сохранить ваши изображения в ПУБЛИЧНЫЙ ПУТЬ. Обычно публичный путь находится в «публичной» папке или «статике».

Наконец, вы можете сделать это:

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.