4

所以我有一个呈现表单的组件，它还使用从 ajax 请求接收到的数据预填充字段。

我的问题是，我不仅希望能够编辑字段，还希望同时添加要提交的新字段，因此我试图将我的预填充数据和新数据初始化到同一个要提交的对象中用我的 ajax 请求。使用我当前的设置，表单数据在呈现表单之前并没有始终如一地填写字段。

这是表单模板

<form @submit.prevent="editThisWorkflow" class="d-flex-column justify-content-center" >

 <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="{ path: '/administrator/workflows'}" >Cancel</router-link>
  </div>
 </div>

</form>

这是脚本

data() {
        return {
            workflowData: {
                id: this.$store.state.workflow.id,
                workflow: this.$store.state.workflow.workflow,
                statuses: this.$store.state.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
        })
    },
    addField() {
        this.workflowData.newStatuses.push({ value: ''});
    },
    deleteField(index) {
        this.workflowData.newStatuses.splice(index, 1);
    }

这是提交数据的 store 方法

editWorkflow(context, workflowData) {
      axios.patch('/workflowstatuses/' + workflowData.id, {
        workflow: workflowData.workflow,
        statuses: workflowData.statuses,
        newStatuses: workflowData.newStatuses
      })
      .then(response => {
          context.commit('editWorkflow', response.data)
      })
      .catch(error => {
          console.log(error.response.data)
      })           
    },

我的问题在这里

 data() {
        return {
            workflowData: {
                id: this.$store.state.workflow.id,
                workflow: this.$store.state.workflow.workflow,
                statuses: this.$store.state.workflow.statuses,
                newStatuses: []
            },
            workflowLoaded: false
        }
    },

有没有更好的方法来设置这部分？

workflowData: {
    id: this.$store.state.workflow.id,
    workflow: this.$store.state.workflow.workflow,
    statuses: this.$store.state.workflow.statuses,
    newStatuses: []
},
4

3 回答 3

1

如果您只需要为您的表单分配一次存储值，那么您可以使用挂载功能。

mounted: function() {
   this.id = this.$store.state.workflow.id
   this.workflow = this.$store.state.workflow.workflow
   this.statuses = this.$store.state.workflow.statuses
},
data() {
      return {
          workflowData: {
              id: '',
              workflow: '',
              statuses: '',
              newStatuses: []
          },
          workflowLoaded: false
      }
 },
于 2018-11-06T13:01:41.647 回答
0

数据属性不接受这个，我通常在这个问题中使用箭头函数，因为它禁止我使用它，并且禁止我的团队也在数据中使用它。在数据中声明所有必要的项目以保持反应性，并在页面的挂载中分配值。

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
},

data: () => ({
   workflowData: {
                id: '',
                workflow: '',
                statuses: '',
                newStatuses: []
            },
            workflowLoaded: false
        }
    },
})
于 2018-11-06T13:11:41.710 回答
0

结果证明我解决这个问题的方法比这里介绍的大多数解决方案都简单。this.$store.state由于 Vuejs 生命周期，我发现很难从中获取数据。并且将值分配给v-modetourned 是不可能的，因为“v-model 将忽略在任何表单元素上找到的初始值、检查或选择的属性。它总是将 Vue 实例数据视为事实的来源。”

解决方案

要使用从 ajax 请求接收的数据预填充字段，例如电子邮件类型的输入字段，我执行以下操作。

第一个。我将 ajax 请求的输出保存在应用程序的存储（Cookie）中 - 它可以是本地存储或会话，取决于适合您的内容。

第二。我用我的应用程序存储中的数据填充了我的Vuex 存储（单一事实来源）。我每次重新加载页面时都会这样做。

第三。v-model而不是在 Vuejs 生命周期中绑定数据，或者使用html input ( )的value 属性。我通过使用来自 Vuex 存储的数据填充 html 的占位符属性<input type="email" value="email@example.com">来预填充输入，如下所示：

<input v-model="form.input.email" type="email" name="email" v-bind:placeholder="store.state.user.data.email">
于 2019-07-16T13:31:49.353 回答