【Vue】v-bindを複数設定できない

サーバーサイド（PHP）で動的に値を渡したいので、呼び出すコンポーネントにv-bindを設定しました。
しかし、１つだけであれば渡せるのですが、複数渡すことができません。
何が考えられますでしょうか？

ソース

html

下記のようにコンポーネントを呼び出します。
objと、tokenという値をpropsに渡したいと思います。

html
1<display-entry-component :obj="{ test: 1 }" :token="test" />

コンポーネント

中身の処理は省略していますが、
propsに指定するプロパティを設定しました。

js
1<script>
2import entrySound from '../../sounds/entry.wav';
3export default {
4  name: "DisplayEntryComponent",
5  props: {
6    token: String,
7    obj: {
8      type: Object,
9      required: true
10    }
11  },
12  mounted() {
13    console.log(this.token);
14  }
15}
16</script>
17

エラー

ページを読み込むと下記のようなエラーが出ます。
エラー内に表示されるtestは、tokenに指定した値のはずなのに、testメソッドが無いというエラーが表示されます。

最初に指定した、objの方は問題なくpropsに渡せているのですが、なぜ二番めの方だけ渡せないのか原因がわかりません。

display.js:55727 [Vue warn]: Property or method "test" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

行動規範の内容に同意します

回答1件

ベストアンサー

Property or method "xxx" is not defined on the instance but referenced during render. というエラーは、「"xxx"という、メソッドかプロパティがコンポーネントに定義されていないのに、(そのコンポーネントのtemplateを)レンダリングするときに取得しようとしている」というエラーです。

今回の場合だと、DisplayEntryComponentのpropsの定義が間違っているのではなく、DisplayEntryComponentを使用しているコンポーネントでtestが定義されていないことがエラーの原因です。

JavaScript
1export default {
2  data () {
3    return {
4      test: 'my_string' // このような記述が抜けているはずです
5    }
6  }
7}

もしくは、単に'test'という文字列をpropsに渡すことを意図しているのであれば、:が必要ありません。:xxx="yyy"は、v-bind:xxx="yyy"の省略記法で、""のなかは（変数の名前など）JavaScriptの「式(expression)」として解釈されます。

Vue.js公式サイトのテンプレート構文のページやAPIのページを確認してみてください。

HTML
1<display-entry-component v-bind:token="test" />
2<display-entry-component :token="test" />
3
4<!-- vs. -->
5
6<display-entry-component token="test" />

投稿2019/09/20 17:50