如何解决【Vue警告】:使用数组语法时props必须是字符串? [英] How to solve [Vue warn]: props must be strings when using array syntax?

问题描述

我的看法是这样的:

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

我的css是这样的:

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 警告]:使用数组语法时，props 必须是字符串.

[Vue warn]: props must be strings when using array syntax.

[Vue 警告]:实例上未定义属性或方法star"但在渲染期间引用.确保声明反应数据数据选项中的属性.(发现于C:xampphtdocsmyshop esourcesassetsjscomponentsStar.vue)

[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:xampphtdocsmyshop esourcesassetsjscomponentsStar.vue)

[Vue 警告]:属性或方法已禁用"未在实例，但在渲染期间引用.确保声明反应式数据选项中的数据属性.(发现于C:xampphtdocsmyshop esourcesassetsjscomponentsStar.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:xampphtdocsmyshop esourcesassetsjscomponentsStar.vue)

我该如何解决?

推荐答案

你的代码有几个错误.

首先，props 中不需要大括号:

First, you don't need the braces in props:

<star :value="{{ $data['rating'] }}" :user="{{ $data['user_id'] }}"></star>
         <!-- ^^ syntax error -->

只是:

<star :value="$data['rating']" :user="$data['user_id']"></star>

这可以简化为:

<star :value="rating" :user="user_id"></star>

另一个错误是 props 的声明.这就是为什么 Vue 告诉你它无法识别 disabled 和 value 的原因.

Another error is the declaration of props. That's the reason why Vue told you it can't recognize disabled and value.

最简单的方法是props: ['value', 'disabled', 'user'],

如果您想添加验证，请遵循此处的文档:https://vuejs.org/v2/guide/components.html#Prop-Validation

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

value 是一个道具.道具的流动是一种下降.组件不应该改变它的 props.

The value is a prop. The flow of props is one way down. A component should not mutate its props.

如果要将值发送回父级，请使用事件.这是事件的文档:https://vuejs.org/v2/guide/components.html#Custom-Events

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

或查看我之前的回答:从子级更新父模型Vue组件

这篇关于如何解决【Vue警告】:使用数组语法时props必须是字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！