Vuejs component props as string

Question

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>

thanksd · Accepted Answer · 2018-01-16 14:50:26Z

99

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".

edited Jan 16, 2018 at 14:50

answered Jul 18, 2017 at 19:33

thanksd

55.9k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

k.ronnakrit · Accepted Answer · 2017-07-19 11:38:21Z

17

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/

answered Jul 19, 2017 at 11:38

k.ronnakrit

1794 bronze badges

Comments

DecPK · Accepted Answer · 2020-06-09 15:34:54Z

1

: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

answered Jun 9, 2020 at 15:34

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Comments

Afraz Ahmad · Accepted Answer · 2019-03-18 12:59:25Z

0

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'],

answered Mar 18, 2019 at 12:59

Afraz Ahmad

5,41634 silver badges40 bronze badges

Comments

Vatsal Shah · Accepted Answer · 2021-10-11 13:07:03Z

0

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>

answered Oct 11, 2021 at 13:07

Vatsal Shah

1,46219 silver badges22 bronze badges

Collectives™ on Stack Overflow

Vuejs component props as string

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related