How to solve [Vue warn]: props must be strings when using array syntax?

问题:

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?

回答1:

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

文章来源: How to solve [Vue warn]: props must be strings when using array syntax?