javascript - 问题转移列表 Localite 以在 selectBox 中添加用户

问题描述

大家早上好，

在这里，我从 vue.js 开始，我被困在一个看起来并不复杂的点上。

事实上，我尝试在我的 adduser 组件中传递我的位置列表。因此，在创建用户时，他必须选择地区。

但不可能把名单传给他，但我知道有必要使用道具，但我不能。你能帮助我吗？

谢谢

组件添加用户：

<template>
  <div class="submitform">
    <div v-if="!submitted">
        <div class="form-group">
          <label for="nom">Nom</label>
          <input type="text" class="form-control" id="nom" required v-model="utilisateur.nom" name="nom">
        </div>
        <div class="form-group">
          <label for="prenom">Prenom</label>
          <input type="text" class="form-control" id="prenom" required v-model="utilisateur.prenom" name="prenom">
        </div>
        <div class="form-group">
          <label for="profession">Profession</label>
          <input type="text" class="form-control" id="profession" required v-model="utilisateur.profession" name="profession">
        </div>
        <div class="form-group">
          <label for="adresse">Adresse</label>
          <input type="text" class="form-control" id="adresse" required v-model="utilisateur.adresse" name="adresse">
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" class="form-control" id="email" required v-model="utilisateur.email" name="email">
        </div>
        <div class="form-group">
          <label for="login">Login</label>
          <input type="text" class="form-control" id="login" required v-model="utilisateur.login" name="login">
        </div>
        <div class="form-group">
          <label for="mobile">Mobile</label>
          <input type="text" class="form-control" id="mobile" required v-model="utilisateur.mobile" name="mobile">
        </div>
        <div class="form-group">
          <label for="password">password</label>
          <input type="text" class="form-control" id="password" required v-model="utilisateur.password" name="password">
        </div>
        <!--<div>
        <ul>
                <li v-for="(localite, index) in localites" :key="index">
                                                {{localite.ville}}
                    
                </li>
            </ul>
        </div>-->
        <!--<div>
        <select>
          <option v-for="(localite, index) in localites" :key="index">
            {{localite.ville}}
          </option>
        </select>
        </div>-->

        <button v-on:click="saveUtilisateur" class="btn btn-success">Submit</button>
    </div>
    
    <div v-else>
      <h4>You submitted successfully!</h4>
      <button class="btn btn-success" v-on:click="newUtilisateur">Add</button>
    </div>
  </div>
</template>

<script>
import http from "../http-common";
import Localite from "../components/LocalitesList.vue"
export default {
  name: "add-utilisateur",
  data() 
  {
    return {
      utilisateur: {
        id: 0,
        nom:"",
        prenom:"",
        profession:"",
        adresse:"",
        email:"",
        login:"",
        mobile:"",
        password:"",
        actif: 0,
        localite: 0
      },
      Localite: [],
      submitted: false
    };
  },
  components:
  {
    'localite': Localite
  },

  methods: 
  {
    /* eslint-disable no-console */
    saveUtilisateur() {
      var data = {
        nom: this.utilisateur.nom,
        prenom: this.utilisateur.prenom,
        profession: this.utilisateur.profession,
        adresse: this.utilisateur.adresse,
        email: this.utilisateur.email,
        login: this.utilisateur.login,
        mobile: this.utilisateur.mobile,
        password: this.utilisateur.password,
        localite: this.utilisateur.localite
      };
      http
        .post("/utilisateur", data)
        .then(response => {
          this.utilisateur.id = response.data.id;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      this.submitted = true;
    },
     /*   retrieveLocalites() {
      http
        .get("/localites")
        .then(response => {
          this.localites = response.data; // JSON are parsed automatically.
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    },
    refreshList() {
      this.retrieveLocalites();
    }
    /* eslint-enable no-console */
  },
  /*mounted() {
    this.retrieveLocalites();
  }*/
    /* eslint-enable no-console */
  
};
</script>

<style>
.submitform {
  max-width: 300px;
  margin: auto;
}
</style>

组件本地化：

<template>
  <div v-if="this.localite">
    <h4>Localite</h4>
    <div>
      <label>CP: </label> {{this.localite.cp}}
    </div>
    <div>
      <label>Ville: </label> {{this.localite.ville}}
    </div>

    <span class="button is-small btn-danger" v-on:click="deleteLocalite()">Delete</span>
  </div>
  <div v-else>
    <br/>
    <p>Please click on a Localite...</p>
  </div>
</template>

<script>
import http from "../http-common";

export default 
{
  name: "localite",
  props: ["localite"],
  methods: 
  {
    /* eslint-disable no-console */
    
    deleteLocalite() {
      http
        .delete("/localite/" + this.localite.id)
        .then(response => {
          console.log(response.data);
          this.$emit("refreshData");
          this.$router.push('/localite');
        })
        .catch(e => {
          console.log(e);
        });
    }
    /* eslint-enable no-console */
  }
};
</script>

谢谢

标签： javascriptvue.jsvuejs2vue-component

javascript - 问题转移列表 Localite 以在 selectBox 中添加用户

问题描述

解决方案

推荐阅读