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

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“位置”路线中的按钮时，我将返回名为“基本”的路线。

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

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

这是应用程序的工作副本：codeandbox

标签： javascriptvue.jsvuejs2vue-router

Answer 1

<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:"[e-mail]"}, 
           {name:"Bonny",email:"[e-mail]"}]
}
mutations: {
    addBasic(state,value) {
        state.basic.push(value)
    },
    removeField(state,index ){
        state.basic.splice(index,1);
    }
 }  

这只是您如何做到的两个版本之一。或者您可以映射突变并直接在点击事件中调用它们。 https://vuex.vuejs.org/guide/mutations.html https://vuex.vuejs.org/guide/forms.html

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

addBasicData 你不需要它