web-dev-qa-db-ja.com

[Vue警告]を解決する方法：値はvue.js 2で上書きされるため、小道具を直接変更することは避けてください。

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

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

私のスターコンポーネントは次のようなものです：

<template>
    <span class="rating" :class='{"disable-all-rating": !!value}'>
        <template v-for="item in items">
            <label class="radio-inline input-star" :class="{'is-selected': ((starValue>= item.value) && starValue!= null)}">
                <input type="radio" class="input-rating" v-model="starValue" @click="rate(item.value)">
            </label>
        </template>
    </span>
</template>
<script>
    export default{
        props: {
            'value': null
        },
        computed: {
            starValue () {
                return this.temp_value
            }
        },
        data(){
            return{
                items: [
                    {value: 5},
                    {value: 4},
                    {value: 3},
                    {value: 2},
                    {value: 1}
                ],
                temp_value: null,
            }
        },
        methods:{
            rate: function (star) {           
               this.$http.post(window.BaseUrl + '/star', {star: star});                         
               this.temp_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警告]：親コンポーネントが再レンダリングされるたびに値が上書きされるため、小道具を直接変更することは避けてください。代わりに、小道具の値に基づいてデータまたは計算されたプロパティを使用してください。変更される小道具：「値」（C：\ xampp\htdocs\myshop\resources\assets\js\components\Star.vueにあります）

どうすれば解決できますか？

javascriptvue.jsvuejs2vue-component
6
samuel toh

ゲッターとセッターを使用して計算を行い、$emitを使用してプロパティを更新する必要があります。例：

    computed: {
        starValue:{ 
            get:function () {
                return this.temp_value
            },
            set: function(newValue){
                // $emit is the correct way to update props:
                this.$emit('update:value', newValue);
            }
        }
    }
5
Andy

ここでvalueプロパティを変更しています。

return this.value = star;

そしておそらくここに。

v-model="value"

警告は、ビューが再レンダリングされるたびに、valueプロパティが$data['rating']に設定され、開始コンポーネント内で行ったことを上書きすることを意味します。

コンポーネント内のプロパティを変更する代わりに、誰かが星をクリックしたときに、コンポーネントが変更されたことを$emitして、ビューを$data['rating']に変更します。これにより、星のコンポーネントが適切に再レンダリングされます。

コンポーネント構成 に関するVueドキュメント）を参照してください。

3
Bert

警告は、親コンポーネントのデータが変更された場合にとにかく変更を失うため、小道具の値を直接変更しないことを示唆しています。

そうは言っても、ここであなたの方法で：

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; - remove this line
    }
  }
}

そして、次のように computed プロパティを追加します。

computed: {
  starValue () {
    return this.temp_value
  }
}
0
Amresh Venugopal