Vuejs component props as string

If you really want to pass static string, you can just pass string directly without v-bind

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

then in JS file

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


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

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

Right now, Vue is trying to find a variable named pictures to pass as the property value to the child component.

If you want to specify a string value in that inline expression, you can wrap the value in quotes to make it a string:

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

Alternately, as @Zunnii answered below, if the value being passed is really just a static string, you can simply omit the v-bind colon shorthand:

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

This way, the avatar prop of the child component will be assigned the string value "pictures".

Related