Vuejs component props as string

user_6220280 0
Viewed 35137

I want to pass this prop as a string:

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

But I think Vue thinks I am trying to call a method because I am getting these warnings:

[Vue warn]: Property or method "pictures" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[Vue warn]: Invalid prop: type check failed for prop "avatar". Expected String, got Undefined.

How can I pass "pictures" as a string?

Vue.component('list-view', {
  props: {
    avatar: { type: String, required: true },
  },
  template: `<div>{{ avatar }}</div>`,
});

var app = new Vue({ el: '#app' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <list-view :avatar="pictures" ></list-view>
</div>

vuejs2 vue.js
5 Answers

In laravel we can pass string as shown below

function authUserCurrency(){
    return '$';
}
<service :authusercurrency="'{!!authUserCurrency()!!}'"></services>

Vue.js Template

props:{authusercurrency:String},

OR

 props:['authUserCurrency'],
user_72357740 
:avatar="pictures"  //vue treat pictures as a variable or computed properties

By default vue treat pictures as a variable or computed properties and vue search locally and doesn't find and throw an error. So what you have to do is tell vue externally that it is a string not a variable or computed properties. So enclose in quotes.

:avatar="'pictures'" // I guess it will work
user_91534480

In my case I needed to pass static string along with dynamic property value. So did as below.

<home-card :title="'By' + post.author.name "></home-card>
user_44642040
Related