第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Vue 2-變異道具vue-warn

Vue 2-變異道具vue-warn

慕容3067478 2019-11-27 10:23:32
我開始了https://laracasts.com/series/learning-vue-step-by-step系列。我停在課程Vue，Laravel和AJAX時遇到了此錯誤：vue.js：2574 [Vue警告]：避免直接更改道具，因為每當父組件重新渲染時，該值就會被覆蓋。而是使用基于屬性值的數(shù)據(jù)或計算屬性。變異的道具：“列表”（位于component中）我在main.js中有此代碼Vue.component('task', {    template: '#task-template',    props: ['list'],    created() {        this.list = JSON.parse(this.list);    }});new Vue({    el: '.container'})我知道當我覆蓋列表屬性時問題出在created（）中，但是我是Vue的新手，所以我完全不知道如何解決它。任何人都知道如何（并請解釋為什么）修復它？
查看完整描述

3 回答

?
收到一只叮咚

TA貢獻1821條經(jīng)驗 獲得超5個贊

這與以下事實有關(guān)：在Vue 2中將局部更改prop視為反模式


如果要在本地更改prop，現(xiàn)在應該做的是在您的字段中聲明一個data使用該props值作為其初始值的字段，然后對副本進行更改：


Vue.component('task', {

    template: '#task-template',

    props: ['list'],

    data: function () {

        return {

            mutableList: JSON.parse(this.list);

        }

    }

});

您可以在Vue.js官方指南中了解更多有關(guān)此內(nèi)容的信息


注意1：請注意，您不能為prop和使用相同的名稱data，即：


data: function () { return { list: JSON.parse(this.list) } // WRONG!!

注2：由于我覺得有一些混亂關(guān)于props和反應，我建議你有一看這個線程


查看完整回答
反對 回復 2019-11-27
?
寶慕林4294392

TA貢獻2021條經(jīng)驗 獲得超8個贊

Vue只是警告您：您更改了組件中的prop，但是當父組件重新渲染時，“列表”將被覆蓋，您將丟失所有更改。因此這樣做很危險。


改為使用計算屬性：


Vue.component('task', {

    template: '#task-template',

    props: ['list'],

    computed: {

        listJson: function(){

            return JSON.parse(this.list);

        }

    }

});


查看完整回答
反對 回復 2019-11-27
?
qq_笑_17

TA貢獻1818條經(jīng)驗 獲得超7個贊

Vue模式props向下和events向上。聽起來很簡單，但是在編寫自定義組件時很容易忘記。


從Vue 2.2.0開始，您可以使用v模型（具有計算屬性）。我發(fā)現(xiàn)這種組合在組件之間創(chuàng)建了一個簡單，干凈且一致的接口：


props傳遞給您組件的任何內(nèi)容都將保持響應狀態(tài)（即，它不會被克隆，也不需要watch在檢測到更改時更新本地副本的功能）。

更改會自動發(fā)送給父級。

可以與多個級別的組件一起使用。

計算屬性允許setter和getter分別定義。這樣Task就可以按以下方式重寫組件：


Vue.component('Task', {

    template: '#task-template',

    props: ['list'],

    model: {

        prop: 'list',

        event: 'listchange'

    },

    computed: {

        listLocal: {

            get: function() {

                return this.list

            },

            set: function(value) {

                this.$emit('listchange', value)

            }

        }

    }

})  

的模型，其屬性定義prop相關(guān)聯(lián)v-model，并且該事件將在改變發(fā)射。然后可以從父級調(diào)用此組件，如下所示：


<Task v-model="parentList"></Task>

所述listLocal計算出的屬性在組件內(nèi)提供了一個簡單的getter和setter接口（認為它像被一個私有變量）。在其中#task-template可以進行渲染listLocal，并且它將保持反應性（即，如果進行parentList更改，它將更新Task組件）。您也可以listLocal通過調(diào)用setter（例如this.listLocal = newList）進行更改，它將更改發(fā)送給父級。


該模式的優(yōu)點在于，您可以將傳遞listLocal給的子組件Task（使用v-model），并且對子組件的更改將傳播到頂級組件。


例如，假設我們有一個單獨的EditTask組件，用于對任務數(shù)據(jù)進行某種類型的修改。通過使用相同的v-model和計算的屬性模式，我們可以傳遞listLocal給組件（使用v-model）：


<script type="text/x-template" id="task-template">

    <div>

        <EditTask v-model="listLocal"></EditTask>

    </div>

</script>

如果EditTask發(fā)出改變它會適當?shù)卣{(diào)用set()上listLocal，并由此傳播事件到頂層。同樣，該EditTask組件也可以使用調(diào)用其他子組件（例如表單元素）v-model。


查看完整回答
反對 回復 2019-11-27
  • 3 回答
  • 0 關(guān)注
  • 952 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號