Question

所以我在加载带有预填充数据的表单时遇到问题。我可以看到store.state在呈现页面之前已设置，但是表单输入未与预填充数据一起出现。

当前，我正在使用mounted()方法来尝试实现此目的，但是它似乎不起作用。

这是我的表单模板

<form @submit.prevent="editThisWorkflow">

    <div>
    <input type="text" v-model="workflowData.workflow">
      </div>
     <div>
     <div v-for="object in workflowData.statuses" :key="object.id">
     <input  type="text" v-model="object.status">
     </div>
     <div v-for="(status, index) in workflowData.newStatuses" :key="index">
      <input type="text" placeholder="Add Status" v-model="status.value">
       <button type="button" @click="deleteField(index)">X</button>
       </div>
       <button type="button"  @click="addField">
          New Status Field
      </button>
      </div>
      <div>
      <div>
     <button type="submit">Save</button>
    <router-link  to="/administrator/workflows">Cancel</router-link>
   </div>
  </div>

</form>

这是脚本

<script>
import { mapGetters, mapActions } from 'vuex'


export default {
    name: 'EditWorkflow',
    data() {
        return {
            workflowData: {
                id: '',
                workflow: '',
                statuses: '',
                newStatuses: []
            },
            workflowLoaded: false
        }
    },
    computed: {
    ...mapGetters(['workflow']),
  },
  methods: {
    ...mapActions(['editWorkflow']),
    editThisWorkflow() {
        this.editWorkflow({
           id: this.workflowData.id,
           workflow: this.workflowData.workflow,
           statuses: this.workflowData.statuses,
           newStatuses: this.workflowData.newStatuses
        }).then(() => {
            this.$router.push({ path: '/administrator/workflows' })
            this.$store.commit('removeDataFromWorkflow')
        })
    },
    addField() {
        this.workflowData.newStatuses.push({ value: ''});
    },
    deleteField(index) {
        this.workflowData.newStatuses.splice(index, 1);
    },
    removeData() {
        this.$store.commit('removeDataFromWorkflow')
    }
  },
  mounted() {
    this.workflowData.id = this.$store.state.workflow.id
    this.workflowData.workflow = this.$store.state.workflow.workflow
    this.workflowData.statuses = this.$store.state.workflow.statuses
  },
  created: function(){
    this.workflowLoaded  = true
    this.$store.dispatch('getWorkflow', this.$route.params.workflow);
    var self = this;
        setTimeout(() => {
          self.workflowLoaded = false;
      }, 3000);
  }
}
</script>

正如您在这里看到的那样，我正在尝试将数据对象的状态设置为存储状态，并且我想知道是否有更好的方法可以做到这一点？

mounted() {
  this.workflowData.id = this.$store.state.workflow.id
  this.workflowData.workflow = this.$store.state.workflow.workflow
  this.workflowData.statuses = this.$store.state.workflow.statuses
},

Answer 1

如何直接将输入内容与商店绑定？为此，您可以为每个商店属性创建一个计算属性，可以为您获取/设置值。例如：

id: {
    get () {
      return this.$store.state.workflow.id
    },
    set (value) {
      this.$store.commit('setId', value)
    }
  }

您要做的就是v-model="id"

https://vuex.vuejs.org/guide/forms.html

在Vue中使用Mounted（）设置数据后如何呈现表单

1 个答案: