computed vue 不 触发_vue computed 无法触发 set
vuex 是不允许被直接修改的,所以我使用computed get set 来完成这部分功能.如下图代码:console.log('set') 无法触发.但是可以从vue-dev-tool看到c已经改变, 问题是: computed没有触发set,为什么c变量可以被改变import Vue from 'vue'export default Vue.component('AttributesCo..
vuex 是不允许被直接修改的,所以我使用computed get set 来完成这部分功能.如下图代码: console.log('set') 无法触发.
但是可以从vue-dev-tool看到c已经改变, 问题是: computed没有触发set,为什么c变量可以被改变
import Vue from 'vue'
export default Vue.component('AttributesContainer', {
data () {
return {
html: ''
}
},
render (h) {
return h(Vue.extend({
template: `
${this.html}
`,
computed: {
c: {
get () {
return this.$store.state.attrs[this.$store.state.activeAttrs]
},
set (val) {
console.log('set')
let attrs = this.$store.state.attrs
let j = {}
j[this.$store.state.activeAttrs] = val
this.$store.commit('changeAttrs', window.Object.assign({}, attrs, j))
}
}
}
}))
},
computed: {
content () {
return this.$store.state.attrs[this.$store.state.activeAttrs]
}
},
watch: {
content: {
handler () {
let html = ''
let c = this.content
for (let i in c) {
let item = c[i]
if (i === 'name') continue
if (i === 'id') continue
html += '
html += `
html += '
if (item.type === 'bool') {
html += `默认`
html += `true`
html += `false`
} else if (item.type === 'number') {
html += ``
} else {
html += ``
}
html += '
html += '
}
this.html = html
},
deep: true
}
}
})
.AttributesContainer {
width: 300px;
}
>>>.item {
display: flex;
flex-direction: column;
}
>>>.item>div {
padding: 5px;
}
computed在vue-tool中确实被改变了, vuex数据却是没变。 computed中的依赖项是vuex数据啊, vuex数据没变的话,computed又为什么发生变化? 绝望中....
更多推荐
所有评论(0)