web-dev-qa-db-ja.com

属性内の補間を解決する方法は削除されました。 v-bindまたはコロンの短縮形を使用しますか？ Vue.JS 2

私の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またはコロンの短縮形を使用してください。

どうすれば解決できますか？

vue.jsvuejs2vue-component
60
samuel toh

v-bind（またはショートカット "："）内でJavaScriptコードを使用します。

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

そして

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

または、ES6 +を使用している場合：

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

オブジェクトからデータを、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>
3
Jason

属性をバインドするには、v-bindまたはショートカット構文「：」を使用します。例：

<input v-bind:placeholder="title">
<input :placeholder="title">
1
Sibashrit Pattnaik