如何解决【Vue警告】：使用数组语法时props必须是字符串？

Posted 2023-02-22

【中文标题】如何解决【Vue警告】：使用数组语法时props必须是字符串？

【英文标题】：How to solve [Vue warn]: props must be strings when using array syntax?

【发布时间】：2017-07-20 07:45:01

【问题描述】：

我的看法是这样的：

<div class="col-md-8">
    ...
        <star :value=" $data['rating'] " :user=" $data['user_id']></star>
    ...
</div>

我的明星组件是这样的：

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

当我点击星号时，控制台上存在这样的错误：

[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 应该是 need to validate 时的对象。并且不要在道具绑定上使用 。

【参考方案1】：

您的代码中有几个错误。

首先，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 的原因。

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

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

另一个问题是你直接改变了道具。

<input ... v-model="value" ...>

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

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

或者看我之前的回答：Update parent model from child component Vue

【讨论】：

@samueltoh 只需按照 Bert 的回答即可。使用事件而不是改变道具。