我有一个使用Vue js的Laravel项目。我用Vue.js做了一个切换组件来显示和隐藏一个元素。但是切换按钮没有出现在我的页面上。我的代码有什么问题吗？我发现只有Hello组件出现在页面上。
app.js
require('./bootstrap');
import { createApp } from 'vue';
import Hello from './components/Hello.vue';
import Toggle from './components/Toggle.vue';
createApp({
components: {
Hello,
Toggle,
}
}).mount('#app');Toggle.vue
<template>
<div>
<button @click="toggleVisibility">Toggle</button>
<div v-if="visible">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Toggle',
data() {
return {
visible: true
};
},
methods: {
toggleVisibility() {
this.visible = !this.visible;
}
}
};
</script>Hello.vue
<template>
<h1>{{message}}</h1>
</template>
<script>
export default {
name: 'Hello',
data() {
return {
message: 'Hello world'
};
}
};
</script>welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body class="antialiased">
<div id="app">
<Hello/>
<Toggle>
<p>This will be appeared</p>
</Toggle>
</div>
</body>
<script src="{{ mix('/js/app.js') }}"></script>
</html>
1条答案
按热度按时间xzlaal3s1#
如果没有更多信息，很难判断。以下是此问题的一些常见原因：
1.验证是否已正确导入app.js文件中的Toggle组件。
1.确保HTML文件中存在ID为“app”的元素。
1.验证链接到app.js文件的script标记是否正确放置在HTML文件中。
1.检查浏览器的控制台是否存在与Vue.js或组件相关的任何错误或警告。
1.确保Toggle.vue文件中的组件名称与app.js文件中使用的组件名称匹配。
请尝试以下步骤来解决问题，如果有帮助，请告诉我。