解決方法[Vue警告]：配列構文を使用する場合、小道具は文字列でなければなりませんか？

Question

私の見解は、このようなものです：

<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でで発見：Star.vue \ \ XAMPP \ htdocsに\ myshopの\リソース\ JS \コンポーネント\資産）

[ヴューが警告]：プロパティまたはメソッド "無効" インスタンスで定義されたが、参照されていませんレンダリング中にデータオプションでは、反応性のある データプロパティを宣言してください。 （ Cで中が見つかりました：\ xamppの\ htdocsに\ myshop \リソース\資産\ Star.vue \ JS \コンポーネント）

は、私はそれをどのように解決することができますか？

Answer 1

コードにいくつかの誤りがあります。

まず

、あなたが小道具で括弧を必要としません：

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

小道具の宣言Vueがdisabledとvalueを認識できないと言ったのはその理由です。

最も簡単な方法は、あなたが検証を追加したい場合は、こちらのドキュメントをたどるprops: ['value', 'disabled', 'user'],

です：https://vuejs.org/v2/guide/components.html#Prop-Validation

もう一つの問題は、あなたが直接小道具を変異されていることです。

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

valueは小道具です。小道具の流れは片道です。構成要素は、その小道具を変異させてはならない。

値を親に戻したい場合は、イベントを使用します。ここでは、イベントのドキュメントは次のとおりです。https://vuejs.org/v2/guide/components.html#Custom-Events

または私の以前の回答を参照してください。あなたが[検証する必要がある]とき `props`がオブジェクトでなければなりませんUpdate parent model from child component Vue