Question

我的目标是从模板中的输入中获取文本。不确定如何进行检索。我正在使用Vue；注意必须在Vue.js中可用，没有外部来源

模板：

<template id="addmodal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">

                    <div class="modal-header">
                        <slot name="header">
                            Enter Course Information: 
                        </slot>
                    </div>

                    <div class="modal-body">
                        <slot name="body">
                            Course Name
                            <input type="text" ref="coursename" placeholder="Numbers Don't Lie 101">
                            Course Grade
                            <input type="text" ref ="coursemark" placeholder="100">
                        </slot>

                    </div>

                    <div class="modal-footer">
                        <slot name="footer">
                            <button class="modal-default-button" @click="confirmCourse">
                                Submit New Course
                            </button>
                            <button class="modal-cancel-button" @click="cancelCourse">
                                Cancel
                            </button>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
    </template>

我需要访问课程名称和课程标记。如果不在模板中，则可以很容易地做到这一点。到目前为止，代码将执行声明。值未定义。

var app = new Vue({
            el: "#app",
            data: {
                courses: [],
                confirmModal: false,
                confirmAdd: false,
                selectedCourse: null
            },

            methods: {
                  addCourse2: function addCourse2() {
                        this.confirmAdd = false;
                        var course = this.$refs.coursename.value;
                        var mark = this.$refs.coursemark.value;
                        if (course) {
                            this.courses.push(new Course(course, mark));
                            this.$refs.newcourse.value = "";
                            this.$refs.newmark.value = "";
                        }
                    }
                }
            });

编辑：忘记添加组件部分

Vue.component("add-modal", {
            template: "#addmodal",
            props: ["open", "course", "mark"],
            methods: {
                confirmCourse: function confirmCourse() {
                    alert(this.$refs.coursename.value);
                    this.$emit("confirm");// GET 
                },
                cancelCourse: function cancelCourse() {
                    this.$emit("cancel");
                }
            }
        });

请原谅我，我觉得这对我来说是个简单的事情，我很想念

Answer 1

使用v模型。或是否在其他组件中。您可以使用$ emit

如何在模板的输入中访问文本？

1 个答案: