如何解决[Vue警告]:使用数组语法时props必须是字符串? [英] How to solve [Vue warn]: props must be strings when using array syntax?
问题描述
我的观点是这样的:
...<star :value="{{ $data['rating'] }}" :user="{{ $data['user_id']></star>...我的星星组件是这样的:
<span class="评级"><template v-for="item in items"><label class="radio-inline input-star" :class="{'is-selected': ((value >= item.value) && value != null), 'is-disabled':已禁用}"><input type="radio" class="input-rating" name="input-rating" v-bind:value="item.value" v-model="value" :disabled="disabled" @click="费率(项目.价值)"></模板></span></模板><脚本>导出默认{props: [{'value': null,'disabled': Boolean}, 'user'],数据(){返回{项目: [{值:5}，{值:4}，{值:3}，{值:2}，{值:1}],临时值:空，}},方法:{率:功能(星){var self = this;如果(！this.disabled){this.$http.post(window.BaseUrl + '/star', {star: star}).then(function (response) {console.log('提交');});this.temp_value = 星；返回 this.value = star;}},}}我的css是这样的:
span.rating {方向:rtl；显示:内联块；}span.rating .input-star {背景: url("../img/star.png") 0 -16px;填充左:0;左边距:0；宽度:16px；高度:16px；}span.rating .input-star:hover, span.rating .input-star:hover ~ .input-star {背景位置:0 0；}span.rating .is-selected{背景位置:0 0；}span.rating .is-disabled{光标:默认；}span.rating .input-star .input-rating {显示:无；}当我点击星星时，控制台上存在这样的错误:
<块引用>[Vue 警告]:使用数组语法时，props 必须是字符串.
[Vue 警告]:实例上未定义属性或方法star"但在渲染期间引用.确保声明反应性数据数据选项中的属性.(在C:\xampp\htdocs\myshop\resources\assets\js\components\Star.vue)
[Vue 警告]:属性或方法禁用"未定义在实例但在渲染期间被引用.确保声明反应性数据选项中的数据属性.(在C:\xampp\htdocs\myshop\resources\assets\js\components\Star.vue)
我该如何解决?
您的代码中有几个错误.
首先，你不需要道具中的大括号:
只是:
这可以简化为:
另一个错误是 props 的声明.这就是 Vue 告诉你它无法识别 disabled 和 value 的原因.
最简单的方法是props: ['value', 'disabled', 'user'],
如果您想添加验证，请按照此处的文档操作:https://vuejs.org/v2/guide/components.html#Prop-Validation
另一个问题是你直接改变了 props.
value 是一个道具.道具的流动是一种方式.一个组件不应该改变它的 props.
如果要将值发送回父级，请使用事件.这是事件的文档:https://vuejs.org/v2/guide/components.html#Custom-Events
或者看我之前的回答:从孩子更新父模型组件 Vue
My view is like this :
<div class="col-md-8">
...
<star :value="{{ $data['rating'] }}" :user="{{ $data['user_id']></star>
...
</div>
My star component is like this :
<template>
<span class="rating">
<template v-for="item in items">
<label class="radio-inline input-star" :class="{'is-selected': ((value >= item.value) && value != null), 'is-disabled': disabled}">
<input type="radio" class="input-rating" name="input-rating" v-bind:value="item.value" v-model="value" :disabled="disabled" @click="rate(item.value)">
</label>
</template>
</span>
</template>
<script>
export default{
props: [{'value': null,'disabled': Boolean}, 'user'],
data(){
return{
items: [
{value: 5},
{value: 4},
{value: 3},
{value: 2},
{value: 1}
],
temp_value: null,
}
},
methods:{
rate: function (star) {
var self = this;
if (!this.disabled) {
this.$http.post(window.BaseUrl + '/star', {star: star}).then(function (response) {
console.log('submitted');
});
this.temp_value = star;
return this.value = star;
}
},
}
}
</script>
My css is like this :
span.rating {
direction: rtl;
display: inline-block;
}
span.rating .input-star {
background: url("../img/star.png") 0 -16px;
padding-left: 0;
margin-left: 0;
width: 16px;
height: 16px;
}
span.rating .input-star:hover, span.rating .input-star:hover ~ .input-star {
background-position: 0 0;
}
span.rating .is-selected{
background-position: 0 0;
}
span.rating .is-disabled{
cursor: default;
}
span.rating .input-star .input-rating {
display: none;
}
When I click the star, there exist error on the console like this :
[Vue warn]: props must be strings when using array syntax.
[Vue warn]: Property or method "star" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in at C:\xampp\htdocs\myshop\resources\assets\js\components\Star.vue)
[Vue warn]: Property or method "disabled" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in at C:\xampp\htdocs\myshop\resources\assets\js\components\Star.vue)
How can I solve it?
There are several errors in your code.
First, you don't need the braces in props:
<star :value="{{ $data['rating'] }}" :user="{{ $data['user_id'] }}"></star>
<!-- ^^ syntax error -->
just:
<star :value="$data['rating']" :user="$data['user_id']"></star>
and this can be simplified to:
<star :value="rating" :user="user_id"></star>
Another error is the declaration of props. That's the reason why Vue told you it can't recognize disabled and value.
The simplest way is props: ['value', 'disabled', 'user'],
If you want to add validations, follow the documentation here: https://vuejs.org/v2/guide/components.html#Prop-Validation
Another problem is that you are mutating props directly.
<input ... v-model="value" ...>
The value is a prop. The flow of props is one way down. A component should not mutate its props.
If you want to send the value back to parent, use events. Here is the documentation of events: https://vuejs.org/v2/guide/components.html#Custom-Events
or see my previous answer: Update parent model from child component Vue
这篇关于如何解决[Vue警告]:使用数组语法时props必须是字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
