从 Vue 中的子组件获取和设置表单值

Posted 2023-02-23

【中文标题】从 Vue 中的子组件获取和设置表单值

【英文标题】：Get and set form value from child component in Vue

【发布时间】：2019-12-04 23:04:27

【问题描述】：

我有以下 2 个组件：

Form.vue（父组件）

import selectImage from "../common/selectImage";
export default 
  data() 
    return 
      form: new Form(
        id: "",
        name: "",
        description: "",
        photoID: []
      )
    ;
  ,
  methods: 
    getImage(setImgid) 
      this.form.photoID = setImgid;
    ,
    createUser() 
      this.getImage();
      this.form
        .post("api/product-category")
        .then(() => 
          toast(
            type: "success",
            title: "Item Created in successfully"
          );
        )
        .catch(error => 
          toast(
            type: "error",
            title: error.message
          );
        );
    
  
;


**selectImage.vue (Child Component)**

<template>
    <div>
        <div class="row">
            <div class="col-md-8">
                <div class="form-group">
                    <input v-model="form.name" type="text" name="name" placeholder="Name" class="form-control" :class=" 'is-invalid': form.errors.has('name') " />
                    <has-error :form="form" field="name"></has-error>
                </div>
            </div>
            <div class="col-md-4">
                <button class="btn btn-primary btn-block" data-toggle="modal" data-target="#gallery" type="button">
                    <i class="fas fa-image"></i> Image
                </button>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-md-12">
                <textarea v-model="form.description" name="description" id="description" placeholder="Description" class="form-control" :class=" 'is-invalid': form.errors.has('description') " style="resise:none" rows="8"></textarea>
                <has-error :form="form" field="description"></has-error>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Create</button>
        <selectImage />
    </div>
</template>

<template>
  <!-- Image modal -->
  <div
    class="modal fade"
    id="gallery"
    tabindex="-1"
    role="dialog"
    aria-labelledby="galleryLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="gallery">Gallery</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <vue-select-image
            :dataImages="dataImages"
            @onselectimage="onSelectImage"
            :h="'90'"
            :w="'140'"
          ></vue-select-image>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" @click="closeModal()">Close</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueSelectImage from "vue-select-image";
import "vue-select-image/dist/vue-select-image.css";
export default 
  name: "selectImage",
  data() 
    return 
      imgId:[],
      dataImages: [
        
          id: "",
          src: "",
          alt: ""
        
      ]
    ;
  ,
  methods: 
    closeModal() 
      $("#gallery").modal("hide");
    ,
    onSelectImage: function(data) 
      
      this.imgId = data.id;
      this.$emit('setImgid', this.imgId);
    
  ,
  components:  VueSelectImage ,
  mounted() 
    axios.get("api/gallery").then(response => 
      this.dataImages = response.data.data.map((obj, index) => 
        return 
          id: obj.id,
          src: obj.thumb,
          alt: obj.name
        ;
      );
    );
  
;
</script>

我使用vue-select-image 创建了 selectImage.vue 组件，因为它会在我的应用程序中多次使用。

使用上面的代码 sn-p 我试图在选择图像时设置新表单对象的photoID 的值。

子组件 selectImage.vue 正在发出正确的数据 i.e id。但我无法获取并将发出的数据设置为photoID。

上面的代码sn-p photoID的值为null。

【问题讨论】：

您正在发出一个事件，但您没有在父模板中收听该事件

@Dadboz 谢谢你提醒我，伙计

【参考方案1】：

你应该在父组件模板中订阅setImgid事件：

<selectImage @setImgid="getImage" />