首页 文章

无法将道具复制到模型数据并在Vue 2中渲染它

提问于
浏览 次
1

我遇到了这个问题，看起来很像我的错误，我无法弄清楚如何解决它 .

我创建了一个通用列表组件，我告诉它应该在每个项目中插入哪个子组件，以及它应该传递给子组件的数据是什么 . 我将所有东西作为道具与列表（数组）本身一起传递 .

问题是我无法改变列表道具 . 所以我尝试将其复制到模型属性 . 否则我收到此错误：

避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖.....

我不能只在任何生命周期事件中使它工作 . 当我保存文件并且热重载重新加载页面时，列表在那里，呈现，充满了项目 . 当我按F5手动重新加载页面时，它已不复存在 . 尽管如此，一切似乎都没有问题

所以在父组件中我这样做：

<List ref="link_list"
:list="this.foo.links" //this is array
:child="'LinkFormItem'" //this is the name of the child component
:section_name="'Links'"
:defaults="{content: '', type: 'facebook'}" />

在List组件中，我得到了这个：

Template

<li class="" v-for="item in datalist">
    <component :is="child" :item="item" ></component>
    <button v-on:click='remove(index++)' type="button" name="button" class='red button postfix small'>Remove</button>
</li>

Script

<script>
import Child1 from './Child1'
import Child2 from './Child2'

export default {
    name: 'search',
    props: ['child', 'list', 'defaults','section_name'], //it is received as 'list'
    components: {
        Child1, Child2
    },
    data () {
        return {
            index: 0,
            datalist: [] //i'm trying to copy 'list' to 'datalist'
        }
    },
    beforeMount: function () {
        // i'm copying it
        for(var k in this.list){
            this.datalist.push(this.list[k])
        }
    },
    methods: {
        //and here I should change it the way I want
        add: function () {
            this.datalist.push(this.defaults)
        },
        getList () {
            return this.datalist;
        },
        remove(index){
            var datalist = [];
            for(var k in this.datalist){
                if(k != index) datalist.push(this.datalist[k]);
            }

            this.datalist = datalist;
        }
    }
}
</script>

我的脚本没有任何问题 . 到底是怎么回事？？

@edit 好的，有些 console.log 后来我发现问题似乎是什么 . HTTP请求实际上比安装组件要花费更长的时间 . 但是当它发生时，它不会触发列表组件中的更新 . 没有重新渲染，列表为空 .

Workaround

我意识到问题与传播有关 . 我在代码中做了一些更改，以确保父组件正在更新并更改模型值 . 但是子组件（列表组件）没有收到它 .

然后我放弃了试图理解为什么并做了以下事情：

1-使用子组件中的 ref 强制使用 $forceUpdate 在子组件中进行更新，然后我在 beforeUpdate 事件中将props分配给模型 . 它导致错误：重新渲染循环 . 此更新导致了新的更新等 . 我们可以用一个标志来阻止它 .

2-相反，我直接调用了一个子方法：

this.$refs.link_list.updateList(data.links);

我讨厌这种方法，因为我觉得它太明确了 . 但它完成了这项工作 . 然后在子组件中使用一种新方法：

updateList(list){
    this.datalist = list;
}

3-在我脑海中传递的另一种可能性是发出一个事件 . 但我没试过，太复杂了

vue.js vuejs2 vue-component

2 回答

  • 0

    你可以简单地做如下的事情

    data () {
        return {
            index: 0,
            datalist: this.list // to copy props to internal component data 
        }
    },

    完成后，您需要在新 this.datalist 上应用数据操作操作，而不是 this.list

    回复于
  • 0

    如果您不想改变原始列表数组，可以执行以下操作：

    data () {
     return {
        index: 0,
        datalist: Object.assign({}, this.list) 
     }
}

    我想这会对你有所帮助

    回复于

相关问题