web-dev-qa-db-ja.com

VueJSデータ属性値としてpropを使用

私は次のシナリオに本当に苦労しています。

いくつかのインデックスページ：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div id="app">

      <ul>
        <li>some existing option</li>
        <example-component :foo="foo" :bar="bar"/>
      </ul>

      <a @click.prevent="showDetail(1, 'abc')" href="#" >Click ME!</a>

    </div>


    <script src="app.js"></script>


  </body>
</html>

いくつかの単一ファイルコンポーネント：

<template>
    <li><a v-show="checkBool" data-toggle="tab" class="some-class" href="#container-div" data-tab-url="{{ this.foo }}">{{ this.bar }}</a></li>
</template>



<script>
export default {

  props: ['foo', 'bar'],


  computed: {
    checkBool: function() {
      return (this.foo != undefined && this.bar != undefined )
    }

  }

}
</script>

そしてapp.jsは次のようになります：

import Vue from 'vue'

Vue.component('example-component', require('ExampleComponent.vue'));

const app = new Vue({
    el: '#app',

    props: [
      'foo',
      'bar'
    ],

    data: {
      foo: '',
      bar: ''
    },

     methods: {
      showDetail: function (foo, bar) {
        this.foo = foo,
        this.bar = bar
      }
  }
});

laravelインスタレーションのもとで、webpackでbabelを使用しています。

シナリオは次のとおりです。

  • Click ME!リンクをクリックすると、fooとbarが更新され、コンポーネントに渡されます（この部分は機能しています）
  • この例ではcheckBoolという名前の計算プロパティがtrueになるため、新しいリストアイテムが表示されます（この部分は機能しています）
  • 新しいリストアイテム。リンクがあり、テキストがbarに正しく設定されています（この部分も機能しています）

この時点で、値の設定とコンポーネントと親の間の通信が適切に機能していることはわかっていますが、data-tab-url="{{ this.foo }}"の部分が私を狂わせています。

口ひげの構文を期待どおりに解析してdata-tab-url="1"を返す代わりに、引用符で囲まれたすべての値の解析/エスケープ値を取得します。

data-tab-url="%7B%7B+this.foo+%7D%7D"のようなもの。

では、どうすればエンコードが行われないようにできますか？私が読んだことから、以前はvuejs 1.*に方法がありました。 3つの角かっこを使用：{{{ this.foo }}}ですが、今は使用しないのでv-htmlを使用しています。この例では使用できません。

javascriptwebpackecmascript-6vue.jsvuejs2
5
Angelin Calu

この:data-tab-url="foo"のように属性をバインドします。

これにより、影響を受ける要素に、コンポーネントのfooプロパティと等しい値を持つdata-tab-url属性が付与されます。

15
thanksd

感謝の答えは正しいですが;

さらに理解するために：

属性のバインドにmoustache構文を使用することはできません。口ひげ{{}}は、dom要素のコンテンツのみを使用します。

 <div>{{someValue}}</div> (THIS IS WRONG)

該当する「src」や「data-tab-url」など、テンプレートの小道具などの属性をバインドするには、「v-bind：attr」または「：attr」の省略形を使用できます。

 <div v-bind:src="someDataVariable"></div>

または

<div v-bind:some-prop="someMethod()"></div>

コンポーネントの任意のメンバー（データ、メソッド、計算済みなど）またはVue app、 "this"なしで）を使用できます。

1
user1920580