如何从模态获取数据?

时间:2018-11-17 17:58:15

标签: javascript vue.js

我想在“父级”中显示选中的社交媒体的名称。 模态下,单击“创建”按钮,选中的社交媒体将显示在“父级”中。

这是我的模态:

  function __construct()
  {
      $this->userdata = array();

  }
  public function setUserData($username, $password) {
      $this->userdata['username'] = $username;
      $this->userdata['password'] = $password;
  }
  public function getUserData() {
      return $this->userdata;
  }

我不知道如何从模式中捕获数据,我想在父级中显示

<template>
      <modal :show.sync="modals.classic" name="edit-button-modal" :width="400"  headerClasses="justify-content-center">
         <div class="modal-content">
          <form>
            <div class="custom-modal-header">
              <div class="custom-modal-wrapper">
                <h4>Social Media</h4>
              </div>
            </div>
            <div class="custom-modal-content">
              <div class="custom-modal-wrapper">
                <div class="row">
                  <div class="col-md-12">
                    <label><b>Choose:</b> </label>
                    <div style="margin-left: 17px;">
                      <span>Checked names: {{ checkedSocialMedia }}</span>
                      <div v-for="social in socialMedia">
                        <p-checkbox v-model="checkedSocialMedia" :id="social.name" :value="social.name" style="color: #52a0d2">
                          {{ social.name }}
                        </p-checkbox>
                      </div>
                    </div>
                  </div>
                  <br>
                  <div class="col-md-12">
                    <label>Style: </label>
                    <br>
                    <div class="col-sm-4">
                      <label><input type="radio" name="optradio" checked> Circle</label>
                      <div style="width: 100px; height: 100px; border: 2px solid grey; margin: 5px;">
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <label><input type="radio" name="optradio"> Square</label>
                      <div style="width: 100px; height: 100px; border: 2px solid grey; margin: 5px; border-radius: 100px;">
                      </div>
                    </div>
                  </div>
                  <br>
                </div>
              </div>
            </div>
            <div class="custom-modal-footer">
              <div class="custom-modal-wrapper">
                <button class="btn btn-success pull-right" @click="addSocialMedia" type="button" >Create</button>
              </div>
            </div>
          </form>
        </div>
      </modal>
</template>

<script>
    // import {DropDown} from 'src/components';
    export default {
      name: 'EditButtonModal',
      props: ["value"],
      data(){
        return {
            socialMedia: [
            {
              name: "Facebook"
            },
            {
              name: "Twitter"
            },
            {
              name: "LinkedIn"
            },
            {
              name: "Line"
            },
            {
              name: "WhatsApp"
            }
          ],
          // unchecked: false,
          checkedSocialMedia : [],
          modals: {
            classic: false
          }
        }
      },
      methods : {
        addSocialMedia (event) {
          this.$emit('modal-event', this.checkedSocialMedia);
          console.log(this.checkedSocialMedia)
        }
      }
    }
</script>

是否可以获取数据?或确实我的方式是错误的。请帮助

0 个答案:

没有答案