属性内の補間を解決する方法は削除されました。vバインドまたはコロンの省略形を使用しますか?Vue.JS 2


92

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

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

回答:


179

内部でJavaScriptコードを使用v-bind(またはショートカット ":"):

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

そして

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

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

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

文字列ではなくオブジェクトに対してこれを機能させる方法はありますか?
Mike de Klerk、2017年

@MikedeKlerkは角かっこを削除するだけです。オブジェクトfooにバインドしている場合、v1構文は:my-object="{{ foo }}"、v2構文はになります:my-object="foo"
2017年

<div>タグ:<div :id="'purchase-id-' + item._id">。レンダリングの例:<div id="purchase-id-5bb254557e1cef3b4cc40529">
rprasad

1
既存の属性に追加したい場合はどうなりますか?例えば、それらを上書きせずにいくつかのクラスを追加しますか?
アダム・レイス

3
あなたが持つことができ@AdamReis class:class同じ要素について。Vue.jsは2つの属性をマージします。そこを参照してください:jsfiddle.net/eywraw8t/466181 またはのみを使用したい場合:classjsfiddle.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>

3

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

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

しかし、placeholder = "{{title}}"を使用できない理由を誰かに教えてもらえますか
Sibashrit Pattnaik 2018

補間は属性から削除されました。現在、html要素内でのみ使用されています
Radu Diță


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で圧縮します。そのため、assetsフォルダーに画像を保存しても、Webpackはbase64で画像を圧縮するので機能しません。ISNは反応変数ではありません。

問題を解決するには、画像をPUBLIC PATHに保存する必要があります。通常、パブリックパスは「public」フォルダーまたは「statics」にあります。

最後に、これを行うことができます:

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

そしてあなたがこれを行うことができるあなたのHTML:

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

パブリックフォルダーを使用する場合

  • ビルド出力に特定の名前のファイルが必要です
  • ファイルは、実行時に変化する可能性があるリアクティブ変数に依存しています
  • 画像があり、そのパスを動的に参照する必要がある
  • 一部のライブラリはWebpackと互換性がない可能性があり、それをタグとして含める以外に選択肢はありません。

詳細:Vue JSドキュメントの「HTMLおよび静的アセット」

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.