Vuejs组件道具为字符串

Question

我想将此道具作为字符串传递：

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

但我认为Vue认为我试图调用一种方法，因为我收到了这些警告：

  

[Vue警告]：属性或方法“图片”未在实例上定义，但在渲染期间引用。确保在数据选项中声明反应数据属性。

     

[Vue警告]：无效道具：支持“头像”的类型检查失败。预期字符串，未定义。

如何将"pictures"作为字符串传递？

Here is my jsfiddle

Answer 1

现在，Vue正试图找到一个名为pictures的变量作为属性值传递给子组件。

如果要在该内联表达式中指定字符串值，可以将该值包装在引号中以使其成为字符串：

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

或者，正如@Zunnii在下面回答的那样，如果传递的值实际上只是一个静态字符串，你可以简单地省略v-bind冒号：

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

这样，子组件的avatar prop将被赋予字符串值"pictures"。

Answer 2

如果你真的想传递静态字符串，你可以直接传递字符串而不需要v-bind

<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 =＆gt; https://jsfiddle.net/dpLp4jk8/

Answer 3

在laravel中，我们可以如下所示传递字符串

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

Vue.js模板

props:{authusercurrency:String}, 

OR

 props:['authUserCurrency'],

Answer 4

:avatar="pictures"  //vue treat pictures as a variable or computed properties

默认情况下，vue将图片视为变量或计算的属性，并且vue在本地搜索，不会发现并抛出错误。因此，您要做的是从外部告诉vue它是一个字符串，而不是变量或计算的属性。因此，请用引号引起来。

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