数组/对象内部的Vue存储方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数组/对象内部的Vue存储方法相关的知识，希望对你有一定的参考价值。
假设我们有5个功能完全相同的按钮。这就是为什么我会思考而不是复制和粘贴这5个按钮而不使用v-for的原因。
methods:
a() ,
b() ,
...
而不是
<v-btn block color="primary" class="my-1" @click="a">A</v-btn>
<v-btn block color="primary" class="my-1" @click="b">B</v-btn>
<v-btn block color="primary" class="my-1" @click="c">C</v-btn>
<v-btn block color="primary" class="my-1" @click="d">D</v-btn>
<v-btn block color="primary" class="my-1" @click="e">E</v-btn>
尝试使用
<v-btn v-for="(button, index) in buttons" :key="index"
block color="primary" class="my-1"
@click="button.click">button.text
</v-btn>
buttons: [
click: this.a, text: "A",
click: this.b, text: "B",
click: this.c, text: "C",
click: this.d, text: "D",
click: this.e, text: "E",
]
它按预期工作，但是当我尝试渲染此按钮对象时，我得到了类似的东西。为什么没有点击？
[ "text": "A" , "text": "B" , "text": "C" , "text": "D" , "text": "E" ]让我们再走一步，让我们添加一个带有动态文本的按钮（另一个数据字段）
boolean: true F: "data1" f() boolean ? this.F = "data1" : "data2" <v-btn block color="primary" class="my-1" @click="F">F</v-btn>
这次我得到
[ "text": "A" , "text": "B" , "text": "C" , "text": "D" , "text": "E" , ]
按钮文本没有改变，但是当我渲染F时，我看到的数据已经改变。
- 这背后的原因是什么，以及如何处理这种情况？
我已经尝试创建诸如setButtons和返回buttons数组和set button字段的方法，这一次，当我渲染按钮时，我得到的是整个对象，但是当数据发生变化（例如F）时，对象不会再次更新。
答案
如果要从for循环中将方法渲染到@click中，则>
您可以创建一个辅助函数来处理它。
这里bindFunction将使用字符串button.click并返回function
new Vue( el: "#app", data: buttons: [ click: "toggleA", text: "A" , click: "toggleB", text: "B" , click: "toggleC", text: "C" , click: "toggleD", text: "D" , click: "toggleE", text: "E" ] , methods: bindFunction(f) this[f](); , toggleA() console.log("toggleA"); , toggleB() console.log("toggleB"); , toggleC() console.log("toggleC"); , toggleD() console.log("toggleD"); , toggleE() console.log("toggleE"); )<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(button, index) of buttons" :key="index"> <button @click="bindFunction(button.click)">button.text</button> </div> </div>
以上是关于数组/对象内部的Vue存储方法的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js- Vuex 更新数组中的对象，内部状态未反映在组件 DOM 中