javascript - Why is this.$refs undefined in Vue child component? - Stack Overflow

admin管理员组

文章数量:1418347

I'm working on a drag and drop ponent in Vue but when I try to access the form using this.$refs, it is returning undefined. I'm using the dialog UI ponent from Vuetify to place my upload form into a dialog/modal.

CodePen

The dialog is a child ponent to another ponent, and the form isn't visible until after the "Add Attachments" button is clicked. I suspect the later is the issue, but I'm unsure how to solve it. I figured placing the code under the mounted life-cycle hook would do the trick but I understand that runs immediately when it renders the button into the parent ponent.

<template>
  <v-dialog v-model="dialog" persistent max-width="600px" style="z-index:999;">
    <template v-slot:activator="{ on }">
      <v-btn small outlined color="#102a43" v-on="on">Add Attachments</v-btn>
    </template>
    <v-card>
      <v-card-text class="pt-4">
        <v-container class="my-4">
          <form ref="fileform" class="file-upload-form">
            <div v-if="dragAndDropCapable" class="dropzone">
              <p>
                Drop your file here, or
                <span>browse</span>
              </p>
              <p>Supported File Types: pdf, jpg, png</p>
            </div>
            <div v-else>
              <v-file-input label="Select File" outlined dense></v-file-input>
            </div>
          </form>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="#b2b2b2" text @click="cancel">Cancel</v-btn>
        <v-btn color="#102a43" outlined>Upload</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data: function() {
    return {
      files: [],
      dialog: false,
      dragAndDropCapable: false
    };
  },
  methods: {
    isDragAndDropCapable() {
      const div = document.createElement("div");
      return (
        ("draggable" in div || ("ondragstart" in div && "ondrop" in div)) &&
        "FormData" in window &&
        "FileReader" in window
      );
    },
    cancel() {
      this.dialog = false;
    }
  },
  mounted() {
    //Verify Drag and Drop Capability
    this.dragAndDropCapable = this.isDragAndDropCapable();
    //Code below return undefined - Expected behavior is to return form element
    console.log(this.$refs.fileform);
  }
};
</script>

<style lang="scss" scoped>
.dropzone {
  border: 2px dashed #90a4ae;
  border-radius: 8px;
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &:hover {
    cursor: pointer;
  }
  p {
    margin-bottom: 0;
    &:first-of-type {
      font-weight: 500;
      font-size: 1rem;
      color: #263238;
      span {
        color: #62b0e8;
      }
    }
    &:last-of-type {
      font-size: 0.8rem;
    }
  }
}
</style>

I'm working on a drag and drop ponent in Vue but when I try to access the form using this.$refs, it is returning undefined. I'm using the dialog UI ponent from Vuetify to place my upload form into a dialog/modal.

CodePen

The dialog is a child ponent to another ponent, and the form isn't visible until after the "Add Attachments" button is clicked. I suspect the later is the issue, but I'm unsure how to solve it. I figured placing the code under the mounted life-cycle hook would do the trick but I understand that runs immediately when it renders the button into the parent ponent.

<template>
  <v-dialog v-model="dialog" persistent max-width="600px" style="z-index:999;">
    <template v-slot:activator="{ on }">
      <v-btn small outlined color="#102a43" v-on="on">Add Attachments</v-btn>
    </template>
    <v-card>
      <v-card-text class="pt-4">
        <v-container class="my-4">
          <form ref="fileform" class="file-upload-form">
            <div v-if="dragAndDropCapable" class="dropzone">
              <p>
                Drop your file here, or
                <span>browse</span>
              </p>
              <p>Supported File Types: pdf, jpg, png</p>
            </div>
            <div v-else>
              <v-file-input label="Select File" outlined dense></v-file-input>
            </div>
          </form>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="#b2b2b2" text @click="cancel">Cancel</v-btn>
        <v-btn color="#102a43" outlined>Upload</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data: function() {
    return {
      files: [],
      dialog: false,
      dragAndDropCapable: false
    };
  },
  methods: {
    isDragAndDropCapable() {
      const div = document.createElement("div");
      return (
        ("draggable" in div || ("ondragstart" in div && "ondrop" in div)) &&
        "FormData" in window &&
        "FileReader" in window
      );
    },
    cancel() {
      this.dialog = false;
    }
  },
  mounted() {
    //Verify Drag and Drop Capability
    this.dragAndDropCapable = this.isDragAndDropCapable();
    //Code below return undefined - Expected behavior is to return form element
    console.log(this.$refs.fileform);
  }
};
</script>

<style lang="scss" scoped>
.dropzone {
  border: 2px dashed #90a4ae;
  border-radius: 8px;
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &:hover {
    cursor: pointer;
  }
  p {
    margin-bottom: 0;
    &:first-of-type {
      font-weight: 500;
      font-size: 1rem;
      color: #263238;
      span {
        color: #62b0e8;
      }
    }
    &:last-of-type {
      font-size: 0.8rem;
    }
  }
}
</style>

• javascript
• vue.js
• ponents
• vuetify.js

Share Improve this question Follow asked Apr 6, 2020 at 14:10 MartinKTMartinKT 2311 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

By default content within v-dialog ponents isn't rendered until it is activated.

Add the eager attribute to change this <v-dialog eager>

https://vuetifyjs./en/ponents/dialogs/

On mounted, the v-dialog isnt actually mounted or lets say its not initialized. I have modified your CodePen.

Try this eager prop of the v-dialog like this below :

 <v-app id="app">
  <v-app id="inspire">
  <v-dialog v-model="dialog" persistent max-width="600px" eager>
    <template v-slot:activator="{ on }">
      <v-btn color="red lighten-2"
            dark
            v-on="on">Add Attachments</v-btn>
    </template>
    <v-card>
      <v-card-text class="pt-4">
        <v-container class="my-4">
          <form ref="fileform" class="file-upload-form">
            <div v-if="dragAndDropCapable" class="dropzone">
              <p>
                Drop your file here, or
                <span>browse</span>
              </p>
              <p>Supported File Types: pdf, jpg, png</p>
            </div>
            <div v-else>
              <v-file-input label="Select File" outlined dense></v-file-input>
            </div>
          </form>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="#b2b2b2" text @click="cancel">Cancel</v-btn>
        <v-btn color="#102a43" outlined>Upload</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  </v-app>
</div>

本文标签： javascriptWhy is thisrefs undefined in Vue child componentStack Overflow