Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

vue.js - Vuejs component props as string

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...