动态模型作为vue.js中的数组。如何清除未使用的输入?

时间:2018-10-09 15:10:41

标签: javascript vue.js vuex vuetify.js

我的模型作为对象数组和当前元素的索引存储在Vuex中。然后在我的组件中,我使用这两个信息来为数组中当前模型的大量输入设置值。

我的问题是,当我为某个字段(数组中当前对象的属性)设置值并将当前元素的索引更改为另一个时,此新模型在对象中没有此属性(模型是动态对象,没有预定义字段),因此只要我不返回设置该值的索引,然后更改为另一个值,它就会消失。

商店

const state = {
  data: {
    fields: [],
  },
  currentField: -1
}

const mutations = {
  updatField (state, obj) {
    state.data.fields[state.currentField][obj.attr] = obj.value
  },
  setCurrentField (state, value) {
    state.currentField = value
  },
}

查看

<template>
  <v-form ref="form">
    <v-text-field v-for="attr in fieldsDefinition" :key="attr.label"
      :value="field['attr'][attr.label]"
      :label="attr.label"
      @input="update(label)"
      ></v-text-field>
  </v-form>
</template>

<script>    
export default {
  store,
  components: { field },
  mixins: [ fieldsDefinition],
  data () {
    return {
      fieldsDefinition: this.getFieldsDefinition()
    }
  },
  methods: {
    update (attr) {
      this.$store.commit(this.change, { attr, value: event.target.value })
    },
    select (index, type) {        
      this.$store.commit('setCurrentField', index)
    }
  }
  computed: {
    ...mapState({
      field: state => state.data.fields[state.currentField],
      currentField: state => state.currentField
    })
  }
}
</script>

this.getFieldsDefinition()返回要渲染的字段的定义,其中包含字段等的标签。)

0 个答案:

没有答案