Question

更多关于Vue组件的阅读。我不理解el属性与组件名称。

前两个组件只使用模板。第三个似乎需要'el'属性。它应该指向什么？再次形成？

这给了我 onFileChange未定义：

app.js：

Vue.component('pg-title', {
    template: '<h1>ATS Credits and Debits</h1>'
});
Vue.component('pg-subtitle', {
    template: '<h2>Table:</h2>'
});
Vue.component('form', {
        el: '#app',
        data: {
            fileinput: ''
        },
        methods: {
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createInput(files[0]);
            },
            createInput(file) {
                var reader = new FileReader();
                var vm = this;
                reader.onload = (e) => {

                vm.fileinput = reader.result;
                }
                reader.readAsText(file);

                console.log(this.fileinput);
            }

        }});

var vm = new Vue({
    el: '#app'
});

的index.html：

<pg-title></pg-title>
<pg-subtitle></pg-subtitle>

<form enctype="multipart/form-data">
    <input type="file" @change="onFileChange">
</form>

Answer 1

好的只是一些事情

创建组件时，您需要使用template而不是el。
从主文档流中取出模板，并使用相应的组件标记名称作为元素，或使用inline-template属性。
不要将组件命名为与任何标准html标签相同。
数据应该是一种功能。

Vue.component('v-form', {
        template: '#myform',
        data() {
          return{
            fileinput: ''
          };
        },
        methods: {
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createInput(files[0]);
            },
            createInput(file) {
                var reader = new FileReader();
                var vm = this;
                reader.onload = (e) => {
                    vm.fileinput = reader.result;
                    console.log(vm.fileinput);
                }
                reader.readAsText(file);
            }
        }
});

new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>

<div id="app">
  <v-form></v-form>
</div>

<template id="myform">
  <form enctype="multipart/form-data">
      <input type="file" @change="onFileChange">
  </form>
</template>

使用inline-template，从组件中删除template并定义您的html，如下所示：

<div id="app">
  <v-form inline-template>
      <form enctype="multipart/form-data">
        <input type="file" @change="onFileChange">
      </form>
  </v-form>
</div>

了解Vue组件和fileupload

1 个答案: