Vuejsコンポーネントの小道具文字列

Question

として、私は文字列として、この小道具を渡したい：

<list-view :avatar="pictures"></list-view> 

しかし、私はVueのは、私はこれらの警告を取得していますので、私はメソッドを呼び出ししようとしています考えていると思う：

を[Vue warn]：プロパティまたはメソッド "pictures"はインスタンス上で定義されていませんが、レンダリング時に参照されます。データオプションで無効なデータプロパティを宣言してください。

[Vue警告]：無効な小道具：小道具「アバター」のタイプチェックに失敗しました。期待される文字列は未定義です。

"pictures"を文字列として渡すにはどうすればよいですか？今

Here is my jsfiddle

Answer 1

、Vueのは、子コンポーネントにプロパティの値として渡すpicturesという名前の変数を見つけようとしています。

あなたがそのインライン式の文字列値を指定したい場合は、あなたがそれを文字列にするために引用符で値をラップすることができます：

<list-view :avatar="'pictures'"></list-view> 

---

代わりに、@Zunniiがあれば、以下の答えとして、

<list-view avatar="pictures"></list-view> 

この方法では、子コンポーネントのavatar小道具：渡された値は実際には単なる静的な文字列である、あなたは単にv-bind大腸速記を省略することができます文字列値"pictures"が割り当てられます。

Answer 2

あなたが本当に静的な文字列を渡したい場合は、あなただけの

<div id="app"> 
    <greeting text="world"></greeting> 
</div> 

その後、JSファイル内

Vue.component('greeting', { 
    props: ['text'], 
    template: '<h1>Hello {{ text }}!</h1>' 
}); 


var vm = new Vue({ 
    el: '#app' 
}); 

JSFiddle =>https://jsfiddle.net/dpLp4jk8/