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

Question

我有以下 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。

Answer 1

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

<selectImage @setImgid="getImage" />