gpt4 book ai didi

vue.js - 为什么不更改我的 Prop 更新 dom?

转载 作者:搜寻专家 更新时间:2023-10-30 22:48:11 24 4
gpt4 key购买 nike

TL;DR fiddle ,https://jsfiddle.net/neon1024/3zn9arj3/4/

<div id="app">
<repos v-bind:repos='[{id: 1, full_name: "davidyell/app", description: "Daves custom CakePHP 3.0 app template"}, {id: 2, full_name: "davidyell/app-template", description: "An empty 2.4 cakephp application template, for use with composer"}]'></repos>
</div>
Vue.component('repos', {
template: `
<div>
<ul>
<li v-for="(repo, index) in repos">
{{ repo.full_name }} -> {{ repo.description }}
<span v-on:click="removeIt" style="color:red;cursor:pointer" v-bind:data-index="index">Delete</span>
</li>
</ul>
</div>
`,
props: {
repos: {
required: true
}
},
methods: {
removeIt(event) {
this.repos.splice(event.target.dataset.index, 1);
console.log(this.repos);
}
}
});

new Vue({
el: '#app'
});

我正在使用 Prop 将数据传递到我的组件中,我希望能够删除项目并更新 dom。

然而,当我删除时,prop 的内部状态发生变化,但 dom 没有更新。

最佳答案

您向组件传递了一个静态(非 react 性)数组。您需要将数组添加到数据以使其响应。

当您将 javascript 对象添加到数据时,Vue 会将其转换为观察到的 值。当您传递一个内联数组时,就像您在问题的代码中所做的那样,该数组被观察到,并且 Vue 不知道更新 DOM。

Vue.component('repos', {
template: `
<div>
<ul>
<li v-for="(repo, index) in repos">
{{ repo.full_name }} -> {{ repo.description }}
<span v-on:click="removeIt" style="color:red;cursor:pointer" v-bind:data-index="index">Delete</span>
</li>
</ul>
</div>
`,
props: {
repos: {
required: true
}
},
methods: {
removeIt(event) {
this.repos.splice(event.target.dataset.index, 1);
console.log(this.repos);
}
}
});

new Vue({
el: '#app',
data:{
repos: [{id: 1, full_name: "davidyell/app", description: "Daves custom CakePHP 3.0 app template"}, {id: 2, full_name: "davidyell/app-template", description: "An empty 2.4 cakephp application template, for use with composer"}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<repos v-bind:repos='repos'></repos>
</div>

关于vue.js - 为什么不更改我的 Prop 更新 dom?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46472942/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com