Question

我目前正在开发一个应用程序，如果单击文本div，则会显示隐藏的"Create Test"。只要代码不放在组件的模板中，它就可以正常工作。这对我来说很奇怪，可能是什么原因？我想使用模板，因为代码将被重用。

这是一个工作示例（常规HTML + vue.js），您可以在其中看到我的期望：https://jsfiddle.net/Lrwfssn1/7/

HTML

<div id="testContainer">
    <div id="teacherMain">
        <h2>Welcome to the</h2>
        <h1> PRO Test Application</h1>
    </div>
    <test></test>
</div>

Vue.js

Vue.component('test', {

    template: `
    <div id="tCreateTest">
        <div id="createTestContainer" @click="seen = !seen">
            <h2>Create</h2>
            <h1 id="testH1">Test</h1>
            <div class="text-left">
                <div class="col-sm-10 form-group-lg">
                    <div v-if="seen" id="testDetails">
                        <form class="form-group">
                            <label id="titelLabel" class="form-control-label" for="titleInput">Enter title:</label>
                            <input type="text" class="form-control form-control" id="titleInput"
                                   placeholder="title">
                        </form>
                        <button class="btn btn-outline-success" id="submitTitle" onclick="testDetails()" type="submit">
                            Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
});

new Vue({
    el: '#tCreateTest',
    data: {
        seen: true
    }
});

Answer 1

将支柱向下传递给组件。步骤进行：

在组件中添加props: ['seen'],
在父级中添加绑定：:seen="seen"

演示：

＆＃13;

Vue.component('test', {
  props: ['seen'],
  template: `
    <div id="tCreateTest">
        <div id="createTestContainer" @click="seen = !seen">
            <h2>Create</h2>
            <h1 id="testH1">Test</h1>
            <div class="text-left">
                <div class="col-sm-10 form-group-lg">
                    <div v-if="seen" id="testDetails">
                        <form class="form-group">
                            <label id="titelLabel" class="form-control-label" for="titleInput">Enter title:</label>
                            <input type="text" class="form-control form-control" id="titleInput"
                                   placeholder="title">
                        </form>
                        <button class="btn btn-outline-success" id="submitTitle" onclick="testDetails()" type="submit">
                            Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
});

new Vue({
  el: '#testContainer',
  data: {
    seen: true
  }
});

＆＃13;

<script src="https://unpkg.com/vue"></script>
<div id="testContainer">
  <div id="teacherMain">
    <h2>Welcome to the</h2>
    <h1> PRO Test Application</h1>
  </div>
  <test :seen="seen"></test>
  
  <br>
  <button @click="seen = !seen">Toggle seen in parent</button>
</div>

＆＃13;

如何在将模板移动到自定义组件时使用v-access访问属性

1 个答案: