Question

我的应用程序组件中包含以下代码段：

<template>
  <div>
    <h3>Basic</h3>
    <div v-for="(field, index) in basics" :key="index">
    <input v-model="basics.name" placeholder="Name" type="text">
    <br>
    <br>
    <input v-model="basics.email" placeholder="Email" type="email">
    <br>
    <hr/>
    <button @click.prevent="addField">Add</button>
    <button @click.prevent="removeField(index)">Remove</button>
    <br>
    <button @click.prevent="back">Back</button>
    <button @click.prevent="toNext">Next</button>
  </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "Basics",
  data() {
    return {
      basics: [{
        name: "",
        email: ""
      }]
    };
  },
  methods: {
    ...mapActions(["addBasicData"]),
    addFied(){
      this.basics.push({
        name: "",
        email: ""
      });
    },
    removeField(index){
      this.basics.splice(index, 1);
    },
    toNext() {
      this.addBasicData(this.basics);
      this.$router.push({ name: "Location" });
    },
    back() {
      this.$router.back();
    }
  }
};
</script>

在上面的代码中，当我填写完表单并单击“下一步”按钮时，数据被发送到该州，我们被引导到另一条名为“位置”的路线。

当我在“位置”路线中点击back按钮时，我又回到名为“基本”路线。

这里的问题是，当我回到名为“基本”的路由时，尽管表单字段与数据对象绑定，但表单字段为空。

当我返回相同路线时如何填充这些输入字段？

以下是该应用的有效副本：codesandbox

Answer 1

此方法以某种方式起作用：

  mounted() {
    // eslint-disable-next-line no-unused-vars
    let fromState = this.$store.state.Basics.basics;
    if (fromState) {
      this.basics.name = fromState.name;
      this.basics.email = fromState.email;
    }
  }

如果有其他方便的方法可以实现这一点，我将非常感谢。尝试过mapState，但没有成功

Answer 2

<div v-for="(field, index) in basics" :key="index">
    <input v-model="basic.name" placeholder="Name" type="text">
    <input v-model="basic.email" placeholder="Email" type="email">
    <button @click.prevent="removeField(index)">Remove</button>
</div>
<hr/>
<button @click.prevent="addField">Add</button>
<br>
<button @click.prevent="back">Back</button>
<button @click.prevent="toNext">Next</button>

methods: {
    addField() {
        this.$store.commit('addBasic',{name:"",email:""} )
    },
    removeField(index) {
        this.$store.commit('removeField',index )
    },
    toNext() {
        this.$router.push({ name: "Location" });
    }
},
computed: {
    basic:{
        get() {
          return this.$store.getters.getBasic;
        }
     }
}

store.js

// ...
state: {
    basic:[{name:"Jonny",email:"jonny@mail.com"}, 
           {name:"Bonny",email:"Bonny@mail.com"}]
}
mutations: {
    addBasic(state,value) {
        state.basic.push(value)
    },
    removeField(state,index ){
        state.basic.splice(index,1);
    }
 }

那只是您如何实现的两个版本之一。或者，您可以映射变异并在click事件中直接调用它们。 https://vuex.vuejs.org/guide/mutations.html https://vuex.vuejs.org/guide/forms.html

添加字段按钮仅在循环外有意义。

您不需要的addBasicData

使用来自vue中vuex状态的数据填充输入字段

2 个答案: